redux devtools 不在扩展 devtools 选项卡中显示状态

Posted 2023-03-06

【中文标题】redux devtools 不在扩展 devtools 选项卡中显示状态

【英文标题】：redux devtools does not show state in extension devtools tab

【发布时间】：2018-05-20 18:20:40

【问题描述】：

我正在使用 react 和 redux 编写一个 chrome 扩展。该扩展在 chrome devtools 中有自己的选项卡。如果我尝试调试 react 代码，则会打开一个新的 chrome devtools，我可以在其中查看控制台、源代码等。

我在商店创建中有以下内容：

const store = createStore(rootReducer, preloadedState, compose(
    applyMiddleware(...middleware),
    global.devToolsExtension ? global.devToolsExtension() : f => f
))

问题是，出现了redux devtools，但是没有检测到store。我也尝试了here 的说明，但仍然没有效果。

我还想提一下，global.devToolsExtension 和 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 都是 undefined。

有人遇到过吗？

【参考方案1】：

我已经设法使用remote-redux-devtools 显示状态。诀窍是右键单击Open Remote Devtools，然后在设置中标记为使用本地服务器。

在单独的选项卡中，确保通过 npm 或 yarn 安装 remotedev-server。示例：

yarn add -D remotedev-server

并运行以下命令：

var remotedev = require('remotedev-server');
remotedev( hostname: 'localhost', port: 8000 );

在这一切之后，状态应该在 redux 开发工具中可见。

【讨论】：

你可以发布任何反应原生的例子，在远程 redux devtools 中显示状态