启用调试状态更改的工具——Redux DevTools

本文介绍使用React.js开发的项目中启用Redux Devtools的步骤：

1. 下载并添加Redux DevTools

1. Chrome

下载地址：https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

2. Firefox

下载地址：https://addons.mozilla.org/en-US/firefox/addon/remotedev/

2. 修改代码

找到项目的入口文件index.js，一般在项目的src文件夹的根目录下。

Step 1 引入依赖并安装

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from "react-redux";

使用npm install安装。

Step 2 定义store

1. 如果：Redux DevTools版本 低于 v2.7：

const store = createStore(reducers, compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
))

2. 如果：Redux DevTools版本 等于或高于 v2.7：

const store = createStore(reducers, compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
))

Step 3 传入Provider

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

更多参考：https://github.com/zalmoxisus/redux-devtools-extension