redux-devtools 简单使用

Question

redux-devtools 是一个非常棒的工具，它可以让你实时的监控 Redux 的状态树的 Store

安装

npm install --save-dev redux-devtools
npm install --save-dev redux-devtools-log-monitor
npm install --save-dev redux-devtools-dock-monitor

使用

创建 DevTools 组件

在你的 App 项目中，通过 Monitor（监视显示）用 createDevTools 创建一个 DevTools 组件。示例用了最常用，最简单的 LogMonitor 和 DockMonitor

containers/DevTools.js

import React from 'react'

//从redux-devtools中引入createDevTools
import { createDevTools } from 'redux-devtools';

//显示包是单独的，要额外指定
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

//创建DevTools组件
const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey  ='ctrl-q'>
    <LogMonitor theme='tomorrow' />
  </DockMonitor>
);

export default DevTools

用 DevTools.instrument() 通过 redux 的 compose 来扩展 store，用 createDevTools() 创建的 DevTools 组件有个特殊的静态方法 instrument()，它返回一个 store 的增强器，在开发中你需要在 compose 中使用。

注意：DevTools.instrument() 要放在 applyMiddleware 后，因为你的 applyMiddleware 可以存在异步行为，为了确保所有的 actions 显示在 store 中，所以要放在后面

store/create.js

import {createStore,applyMiddleware,compose} from 'redux'
import rootReducer from './modules/reducers'

import thunk from './middleware/thunk'
import DevTools from '../containers/DevTools'

const enhancer = compose(
  //你要使用的中间件，放在前面
  applyMiddleware(thunk),
  //必须的！启用带有monitors（监视显示）的DevTools
  DevTools.instrument()
)

export default function createStoreWithMiddleware(initialState){
  //注意：仅仅只有redux>=3.1.0支持第三个参数
  const store = createStore(rootReducer,initialState,enhancer)
  return store
}

Render in your App

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import TodoApp from './components/Counter';

//注意，不要直接这样做，要区分开发环境和生产环境
import DevTools from './containers/DevTools';

const store = configureStore();

render(
  <Provider store={store}>
    <div>
      <Counter />
      <DevTools />
    </div>
  </Provider>
  document.getElementById('app')
);