将 redux-devtools-extension 与 react-native 与 chrome 一起使用

Question

在为 react-native 设置 Redux devTools 时需要帮助 我这里有非常简单的 reducer 和 createStore，我尝试合并 redux-devtools-extension，所以我可以调试我的 react-native 应用程序，但我在 Redux 选项卡中得到“未找到商店”

import { createStore, applyMiddleware} from 'redux'
import {reducer} from "./reducers"
import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools- 
extension'

let store = createStore(reducer, devToolsEnhancer());

export const reducer = (state=[], action) => {
switch(action.type) {
    case "ADD_MEMBER":                   
        return [...state, {categoryID: 0, name: "Bill", zip: "27733", id: 4}]         
    default:
        return state
}
return state;
}

Answer 1

另一种选择是使用React Native Debugger。

胜利在于，您不必每次都 npm install redux devtools。调试器为您提供开箱即用的旧版“REDUX_DEVTOOLS_EXTENSION”。

因此，如果您从网络重用代码，则不需要任何代码更改。与redux devtools extension 相同的设置即可。

有关如何使用 Expo 应用程序设置 React Native 调试器的详尽指南，请查看 here。 （因为官方文档有点混乱。）

Answer 2

Redux DevTools Extension 无法访问 React Native worker，因为扩展无法将代码注入 web worker。您必须使用 remote-redux-devtools 通过 websockets 与扩展程序通信。

你只需要替换

import { devToolsEnhancer } from 'redux-devtools-extension'

与

import devToolsEnhancer from 'remote-redux-devtools';

然后从扩展上下文菜单中，单击“打开远程 DevTools”。默认情况下，它将使用其远程服务器进行快速引导，但建议通过安装和运行remotedev-server 来运行本地服务器。这类似于你必须为 React Native 安装和运行 react-devtools 包。