Redux-devTools简单的使用

http://www.jianshu.com/p/a2d4c1856560

Introducing

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

Installation

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

Usege

创建DevTools组件

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

containers/DevTools.js

import React from 'react'//从redux-devtools中引入createDevToolsimport { 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'));

参考文档：redux-devTools

文／Moon_Yue（简书作者）
原文链接：http://www.jianshu.com/p/a2d4c1856560
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。