Redux超酷的开发工具Redux-Devtools

超酷的开发工具 Redux-devtools

redux-devtools是一个有趣而又高效的redux开发工具，若是你想直接在github上查看相关的内容，请前往这里。事实上，也鼓励你们养成在github上学习第一手资料的习惯。

ok，首先，让咱们来下载redux-devtools的相关资料

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

• redux-devtools：redux的开发工具包，并且DevTools支持自定义的 monitor 组件，因此咱们能够彻底自定义一个咱们想要的 monitor 组件的UI展现风格，如下两个是咱们示例中用到的。
• redux-devtools-log-monitor： 这是Redux Devtools 默认的 monitor ，它能够展现state 和 action 的一系列信息，并且咱们还能够在monitor改变它们的值。
• redux-devtools-dock-monitor：这monitor支持键盘的快捷键来轻松的改变tree view在浏览器中的展现位置，好比不断的按‘ctrl + q’组合键能够让展现工具停靠在浏览器的上下左右不一样的位置，按“ctrl+h”组合键则能够控制展现工具在浏览器的显示或隐藏的状态。

接下来咱们在containers目录新增一个DevTools.js文件，而且设置monitor。 代码清单：demo-redux-devtools/containers/DevTools.js

import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

export default createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey='ctrl-q'>
    <LogMonitor />
  </DockMonitor>
);

而后在index.js文件引入这个容器组件 代码清单：demo-redux-devtools/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './containers/App'
import DevTools from './containers/DevTools'
import { createStore, compose } from 'redux';
import todoApp from './reducers'

// 把多个 store 加强器从右到左来组合起来，依次执行
// 这个地方彻底能够不用compose，演示一下compose的使用
const enhancer = compose(
  DevTools.instrument()
);

let store = createStore(todoApp, enhancer)
let rootElement = document.getElementById('app')

render(
  <Provider store={store}>
    <div>
      <App />
      <DevTools />
    </div>
  </Provider>,
  rootElement
)

注意：在实际项目开发中时应该根据环境来肯定<DevTools />组件的展现与否，示例中是在开发环境的演示，直接放在Provider里面。