React Native 调试器状态未定义答案

【问题标题】：React Native Debugger state undefinedReact Native 调试器状态未定义
【发布时间】：2018-03-31 10:16:09
【问题描述】：

我正在尝试为我的项目使用远程 React Native 调试器。我已经使用$ brew update && brew cask install react-native-debugger 在我的 Mac 上安装了 React-Native-Debugger。然后我添加了带有npm install --save-dev remote-redux-devtools的Remote-redux-devtools包

我的 createStore 代码看起来像这个 atm。

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'remote-redux-devtools'
import thunk from 'redux-thunk'
/* some other imports */

const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 })
export default createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk.withExtraArgument(api), logger, firebaseSave)
))

控制台输出工作得很好，但它没有处理操作或 redux 状态。我错过了一步吗？为什么不支持 redux？

https://github.com/zalmoxisus/remote-redux-devtools

https://github.com/jhen0409/react-native-debugger

【问题讨论】：

标签： javascript ios macos reactjs react-native

【解决方案1】：

将 redux devtools 扩展添加到您的 createStore

export default createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk.withExtraArgument(api), logger, firebaseSave)
),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

欲了解更多信息：https://github.com/zalmoxisus/redux-devtools-extension

【讨论】：

我认为该软件包不适用于 React-Native？
查看文档：github.com/jhen0409/react-native-debugger/blob/master/docs/…

【解决方案2】：

我遇到了同样的问题，我认为 react native 调试器工作正常，例如。反应本机调试器的映射器工作正常，它正在从源头提取我的项目文件/目录。控制台输出工作正常。

但我没有看到任何 redux 正在兴起。

经过一些试验和错误，我发现我必须在我的 android 模拟器上打开 JS 开发模式。

步骤：Ctrl + M -> Dev Setting -> 检查JS Dev Mode -> Reload

【讨论】：

【解决方案3】：

我注意到除此之外，我在开发者工具中看不到我的资源，这让我意识到我需要这样做

在IOS模拟器上

Cmd + D > 远程调试 JS 为我工作

【讨论】：

【解决方案4】：

这是我用来使 redux 状态在 react-native-debugger 上可见的解决方案：假设我有一个名为 uiReducer 的 redux reducer：

const rootReducer = combineReducers({
  ui: uiReducer
});

let composeEnhancers = compose;

if (__DEV__) {
    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(ReduxThunk)));

请不要忘记导入你的 reducer，以及从 redux、react-redux 和 redux-thunk 导入的以下内容：

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import ReduxThunk from 'redux-thunk';

现在，您的状态（如果在调试器中可见）：

希望对你有帮助！谢谢，

【讨论】：