Introducing

redux-devtools 是一個(gè)非常棒的工具，它可以讓你實(shí)時(shí)的監(jiān)控Redux的狀態(tài)樹的Store

Installation

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

Usege

創(chuàng)建DevTools組件

在你的App項(xiàng)目中，通過“Monitor（監(jiān)視顯示）”用createDevTools創(chuàng)建一個(gè)DevTools組件。示例用了最常用，最簡單的LogMonitor和DockMonitor

containers/DevTools.js

import React from 'react'

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

//顯示包是單獨(dú)的，要額外指定
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

//創(chuàng)建DevTools組件
const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey  ='ctrl-q'>
    <LogMonitor theme='tomorrow' />
  </DockMonitor>
);

export default DevTools

用DevTools.instrument()通過redux的compose來擴(kuò)展store

用createDevTools()創(chuàng)建的DevTools組件有個(gè)特殊的靜態(tài)方法instrument(),它返回一個(gè)store的增強(qiáng)器,在開發(fā)中你需要在compose中使用。注意：DevTools.instrument()要放在applyMiddleware后，因?yàn)槟愕?code>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（監(jiān)視顯示）的DevTools
  DevTools.instrument()
)

export default function createStoreWithMiddleware(initialState){
  //注意：僅僅只有redux>=3.1.0支持第三個(gè)參數(shù)
  const store = createStore(rootReducer,initialState,enhancer)
  return store
}

Render <DevTools /> 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';

//注意，不要直接這樣做，要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境
import DevTools from './containers/DevTools';

const store = configureStore();

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

參考文檔：redux-devTools