React Native 调试器状态未定义
Posted
技术标签:
【中文标题】React Native 调试器状态未定义【英文标题】:React Native Debugger state undefined 【发布时间】: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
【问题讨论】:
【参考方案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';
现在,您的状态(如果在调试器中可见):
希望对你有帮助! 谢谢,
【讨论】:
以上是关于React Native 调试器状态未定义的主要内容,如果未能解决你的问题,请参考以下文章
Thunks 未出现在 React Native 调试器的操作列表中
谷歌浏览器中的 React Native 调试不起作用(文件未显示在调试器中)
React Native:获取请求在远程调试器处于活动状态时不起作用(Android)