如何启用 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屋！