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裏面。