博客

简单粗暴: 直接去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

的步骤省略，详情可

点击这里