IT技术 - 如何启用 Redux Devtools？ - 吾爱随笔录

如何启用 Redux Devtools？

IT技术 reactjs redux google-chrome-extension react-redux

2021-05-12 23:24:26

我正在学习 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 的兼容性？

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')
);

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

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

编辑：

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

let store;

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

没有if声明

其它你可能感兴趣的问题

上一篇是否可以在任何 3D 打印软件中创建盘管？下一篇为什么 Material-UI Appbar onLeftIconButtonTouchTap 不起作用？