首页 > 解决方案 > 将 expo 应用程序连接到 Redux 开发工具扩展

问题描述

我正在尝试使用 expo 将 Redux 开发工具扩展连接到 React Native 应用程序。我希望将 Redux 扩展连接到 expo 应用程序,以下是有关 package.json 文件依赖项和 store.js 代码的所有详细信息。

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import authReducer from './reducers/authReducer';
import uiReducer from './reducers/uiReducer';

const initialState = {};
const middleware = [thunk];
const reducers = combineReducers({
  auth: authReducer,
  UI: uiReducer
});

const composeEnhancers = (
  window.__REDUX_DEVTOOLS_EXTENSION__
  && window.__REDUX_DEVTOOLS_EXTENSION__()
) || compose;

const store = createStore(
  reducers,
  initialState,
  composeEnhancers(applyMiddleware(...middleware))
);

export default store;

package.json 文件依赖,已经安装了 react 调试器,当应用在 chrome 浏览器中启动时它会打开:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "postinstall": "rndebugger://set-debugger-loc?host=localhost&port=19001"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.7.3",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "formik": "^2.1.5",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
    "react-navigation-drawer": "^2.5.0",
    "react-navigation-stack": "^2.8.2",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0",
    "open": "^7.2.1",
    "react-devtools": "^4.8.2",
    "react-native-debugger": "^1.1.0",
    "react-native-debugger-open": "^0.3.25",
    "redux-devtools-extension": "^2.13.8"
  },
  "private": true
}

标签: reactjsreact-nativereduxreact-reduxexpo

解决方案


推荐阅读