如何启用Redux Devtools? [英] How to enable Redux Devtools?

问题描述

我正在关注React的教程，并请教员在Chrome上安装扩展程序 Redux Devtools .就我而言，我想知道为什么我的扩展名似乎无效(灰色).在我的chrome扩展程序设置中，其设置为打开，将站点访问权限设置为在所有站点上，允许访问文件URL是打开的，但是当我查看"Redux"选项卡时，它显示:

I am following tutorial on React and instructor install an extension on Chrome, the Redux Devtools. In my case i am wondering why my extension seems to be inactive (in color gray). In my chrome extension settings, it is On, site access is set On all sites, Allow access to file URLs is on but when i view my Redux tab, it shows:

未找到存储.请务必按照说明进行操作.

在 .js 文件中，有这样的声明:

On the .js file, there is a declaration something like this:

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兼容吗?

What could be the problem? Compatibility with the Chrome?

推荐答案

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 Devtools?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！