如何启用 Redux Devtools？

Posted 2023-02-19

【中文标题】如何启用 Redux Devtools？

【英文标题】：How to enable Redux Devtools?

【发布时间】：2020-07-05 08:40:02

【问题描述】：

我正在关注 React 教程，并且讲师在 Chrome 上安装了一个扩展程序，即 Redux Devtools。就我而言，我想知道为什么我的扩展程序似乎不活动（灰色）。在我的 chrome 扩展设置中，它是 On，站点访问设置为 在所有站点上，允许访问文件 URL 已打开，但当我查看我的 Redux 选项卡时，它显示：

No store found. Make sure to follow the instructions.

在 .js 文件中，有如下声明：

const ReactReduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
let store;
if(window.navigator.userAgent.includes("Chrome") && ReactReduxDevTools)
 store = createStore(
        rootReducer,
        initialState,
        compose(
            applyMiddleware(...middleware), 
            ReactReduxDevTools)
    );
else
...

可能是什么问题？与 Chrome 的兼容性？

【参考方案1】：

它仅在检测到您正在运行的应用程序上的商店时才有效。这是有道理的，因为没有什么可显示的。

使用正确连接的 Redux 启动一个应用程序，它会显示为彩色并包含非常有用的信息。

编辑：

我想我找到了。检查代码更正。如果存在__REDUX_DEVTOOLS_EXTENSION_COMPOSE__，则compose 方法必须是raplace。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

let store;

store = createStore(
          rootReducer,
          initialState,
          composeEnhancers(
            applyMiddleware(...middleware)
        );

没有if 声明

【讨论】：

必须将商店配置为与扩展程序通信。请参阅the Redux docs page on "Configuring Your Store"。此外，our official Redux Toolkit package 会自动为您配置 devtools 扩展设置。

【参考方案2】：

import Provider from 'react-redux'

import createStore, applyMiddleware, compose from 'redux'

import reducers from './reducers';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware()))


ReactDOM.render(
  <Provider store=store>
    <App />
  </Provider>,
  document.getElementById('root')
);