Redux 开发工具和 React Native

Posted 2023-03-08

【中文标题】Redux 开发工具和 React Native

【英文标题】：Redux devtools and React Native

【发布时间】：2019-07-27 22:37:00

【问题描述】：

我正在开发一个 React Native 应用程序，但由于某些原因，我的 redux devtools 无法检测到商店。

这是 store.js 的代码

import  createStore, applyMiddleware, compose  from 'redux';
import createSagaMiddleware from 'redux-saga';

import jobs from './reducers/jobs';
import  watcherSaga  from './sagas';

// Saga Middleware
const sagaMiddleware = createSagaMiddleware();
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(jobs, composeEnhancer(applyMiddleware(sagaMiddleware)));

sagaMiddleware.run(watcherSaga);
// Enable Hot Module for the reducers
/* eslint-disable global-require */

if (module.hot) 
  //   module.hot.accept('./reducers/index', () => 
  //     store.replaceReducers(require('./reducers').default);
  //   );


export default store;

当我打开 chrome debugger-ui 时，我在 redux 选项卡中看到“未找到商店”。

我已经通过扩展设置授予了对文件 url 的访问权限。我不知道可能是什么问题。我尝试了几个使用中间件和 redux-tools 的商店设置，在教程中找到，但它们似乎都不起作用。我也尝试了独立应用程序，但它没有检测到任何东西，也没有检测到反应代码。 我做错了什么？

【问题讨论】：

jobs 中有什么？是combineReducers(...reducers ) 对象吗？

我为reducers创建了一个索引文件： const rootReducer = combineReducers( jobs, other );但是如果您查看代码，您会发现我正在尝试直接加载作业减速器。

不行，你需要将rootReducer作为第一个参数传递给createStore，而不仅仅是jobs

更奇怪的是，当我启动应用程序并且 chrome 打开“window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__”以及“REDUX_DEVTOOLS_EXTENSION”时存在，但是当我控制台登录时它们是未定义的store.js 所以基本上商店是在扩展加载到chrome之前加载的？可能是这样吗？

我不确定，但我认为浏览器的window 与您尝试通过应用程序加载它时存在问题。尝试文档github.com/zalmoxisus/redux-devtools-extension 中的步骤 1.3。 import composeWithDevTools from 'redux-devtools-extension'; 而不是 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

【参考方案1】：

我找到了解决方案并分享了它，以便帮助其他人。 主要问题是我使用的是 expo，所以 expo 在与普通 devtools 不同的端口上运行。 我没有使用 chrome，而是下载了独立的调试器，然后，感谢article，我用正确的端口打开了调试器，这很神奇：

rndebugger://set-debugger-loc?host=localhost&port=19001