将 Redux-devtools-extension 与 React-native 与 Chrome 一起使用

Question

需要帮助来设置 Redux devTools for react-native 我这里有非常简单的reducer和createStore，我尝试合并redux-devtools-extension，这样我就可以调试我的react-native app，但我在 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

Redux DevTools Extension无法访问React Native worker，因为扩展无法将代码注入Web Workers。您必须使用remote-redux-devtools通过 websocket 与扩展进行通信。

你只需要更换

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

跟

import devToolsEnhancer from 'remote-redux-devtools';

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

Answer 2

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

胜利是，你不必每次都npm安装redux devtools。调试器为您提供开箱即用的旧">REDUX_DEVTOOLS_EXTENSION"。

因此，如果要重用来自 Web 的代码，则不需要任何代码更改。与 redux devtools 扩展相同的设置将正常工作。

有关如何使用 Expo 应用程序设置 React Native 调试器的完整指南，请查看此处。(因为官方文档有点混乱。