Redux-devTools簡單的使用
阿新 • • 發佈:2019-02-12
http://www.jianshu.com/p/a2d4c1856560
Introducing
redux-devtools 是一個非常棒的工具,它可以讓你實時的監控Redux的狀態樹的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
建立DevTools元件
在你的App專案中,通過“Monitor(監視顯示)”用createDevTools
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 <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';
//注意,不要直接這樣做,要區分開發環境和生產環境
import DevTools from './containers/DevTools';
const store = configureStore();
render(
<Provider store={store}>
<div>
<Counter />
<DevTools />
</div>
</Provider>
document.getElementById('app')
);
文/Moon_Yue(簡書作者)
原文連結:http://www.jianshu.com/p/a2d4c1856560
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。