有了它，一下就把项目中重复的状态对象去除掉了

redux-devtools

1. 什么是redux-devtools

Redux DevTools是一款Redux官方提供的浏览器调试工具,可以让我们很方便的对Redux保存的状态进行追踪调试，特别是在团队开发的时候可以非常方便的了解到其他同事定义的一些状态，防止定义过多的重复状态，小伙伴们可以到谷歌应用商场下载，没办法fq的也可以私信我，我发给你们。

2. 安装工具库

sudo npm add redux-devtools-extension

3. 添加redux-devtools中间件配置

修改store.js文件

// 引入 createStore，用于创建store对象
import { legacy_createStore as createStore, applyMiddleware, combineReducers} from 'redux'
// 引入 redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'
// 引入为count组件服务的reducer
import countReducer from './reducers/count'
// 引入为person组件服务的reducer
import personReducer from './reducers/person'

// 引入 thunk 中间件
import thunk from 'redux-thunk'

// 暴露store，combineReducers传入的对象就是redux帮我们保存的那个总状态对象
export default createStore(combineReducers({
    counts: countReducer,
    persons: personReducer
    // 使用composeWithDevTools包裹原先的函数
}), composeWithDevTools(applyMiddleware(thunk)))

效果展示

4. redux-devtools常用功能

在左侧区域列表中展示了操作过的每一个action指令，如果调试的过程中有操作错误的，还可以通过jump按钮跳转回去重新操作。

在右侧的区域，最常用的可能莫过于State标签页了，在这里面，我们可以看到存放在redux中的所有状态，并且可以选择树状展示或图标展示等。

另外在下面区域，有一个很明显的播放条，后面还带着倍速的下拉菜单，这一个是回放功能，点击播放按钮，他就会重复我们前面执行过的步骤，给你重新演示一下状态变化过程。

上图中可以看到，还未执行到的action是灰色的，而执行过的则亮起来了。除了播放条之外有一个小键盘形状的按钮，打开它可以看到有一个文本框以及一个Dispatch按钮，在这里，我们可以通过代码的形式来执行action，例如：

不需要界面上点击按钮，直接通过代码的实现来进行调试，也是非常实用方便的一个功能。

本文正在参加「金石计划 . 瓜分6万现金大奖」