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
