如何启用 Redux Devtools？

Question

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

Answer 1

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

Answer 2

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

在正确连接 Redux 的情况下启动应用程序，它将显示彩色并包含非常有用的信息。

编辑：

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

let store;

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

没有if声明