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 的步骤省略，详情可点击这里