image.png

安裝依賴包

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

創建 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>
);

render

index.js

import React from 'react';
import { render } from 'react-dom';
import { createStore, compose } from 'redux';
import { Provider } from 'react-redux';

import { persistState } from 'redux-devtools';
import DevTools from './containers/DevTools';


import reducer from './reducers/todo_reducer'
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';


const enhancer = compose(//http://cn.redux.js.org/docs/api/compose.html
  DevTools.instrument()
);


const store = createStore(reducer, enhancer);

render(
    <Provider store={store}>
        <div>
            <App/>
            <DevTools />
        </div>
    </Provider>
    ,
    document.getElementById('root')
);
registerServiceWorker();

快捷方式

ctrl+h 顯示/隱藏DevTools

參考文檔

Redux DevTools
Redux-devTools簡單的使用