Redux-devtools 使用

简单粗暴: 直接去chrome市场下载Redux DevTools Extension，免去安装依赖包和配置。

安装npm包

1. redux-devtools
2. redux-devtools-log-monitor log信息组件
3. redux-devtools-dock-monitor log信息展示组件

$ npm install redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor -D

步骤

1. create 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'const DevTools = createDevTools(<DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q'>    <LogMonitor /></DockMonitor>)

2. 在 createStore 前创建 enhancer

   import { compose } from 'redux'import DevTools from '@/DevTools'const enhancer = compose(DevTools.instrument()) 

3. createStore

   import { createStore } from 'redux'const store = createStore([reducerState], [initialState], enhancer)

结合使用 react-redux 的步骤省略，详情可点击这里