Introducing
redux-devtools 是一個非常棒的工具泊藕，它可以讓你實時的監(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項目中榕栏，通過“Monitor（監(jiān)視顯示）”用createDevTools創(chuàng)建一個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';
//創(chuàng)建DevTools組件
const DevTools = createDevTools(
<DockMonitor toggleVisibilityKey='ctrl-h'
changePositionKey ='ctrl-q'>
<LogMonitor theme='tomorrow' />
</DockMonitor>
);
export default DevTools
用DevTools.instrument()通過redux的compose來擴展store
用createDevTools()創(chuàng)建的DevTools組件有個特殊的靜態(tài)方法instrument(),它返回一個store的增強器,在開發(fā)中你需要在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（監(jiān)視顯示）的DevTools
DevTools.instrument()
)
export default function createStoreWithMiddleware(initialState){
//注意：僅僅只有redux>=3.1.0支持第三個參數(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
