Redux DevTools的安装与使用

网络允许的小伙伴们可以直接在Chrome网上应用商店搜索redux-devtools安装插件，文本服务于无法直接安装的童鞋。

1.什么是Redux DevTools?

Redux DevTools是一款Redux官方提供的浏览器调试工具,
可以让我们很方便的对Redux保存的状态进行追踪调试

• 完整项目地址
• chrome扩展程序地址（用于下载工具压缩包）

2.如何使用Redux DevTools

注意：
我使用的是node版本是11.15.0打包项目的，node12以上的版本打包项目，遇到ReferenceError: primordials is not defined的问题。试了多种解决方法后，发现使用node12以下的版本，可以打包成功。

• 报错：ReferenceError: primordials is not defined解决方案：ReferenceError: primordials is not defined
• 详细的node下载，与使用nvm管理node版本见（node降级）：NodeJS环境搭建-方法三：搭建多个版本的Node环境
• nvm安装后，使用nvm use xxx显示切换版本成功，但使用nvm ls查看node版本任未变化原因及解决办法：nvm use xxx无效
• node安装后，npm未安装，解决办法见：node下载安装后，npm安装失败解决方案

2.1在浏览器中安装Redux DevTools

1 chorm扩展程序地址（用于下载工具压缩包）
2 解压redux-devtools-extension-2.17.1
3 打开控制台，找到redux-devtools-extension-2.17.1目录，安装依赖：

npm i

4 打包扩展程序：

npm run build:extension

5 chrome中，按F12进入工具栏，就多出了Redux选项

2.2 添加Redux DevTools中间件配置

• store.js文件中导入compose函数

   import {createStore, applyMiddleware, compose} from "redux"; // applyMiddleware:应用中间件

• store.js文件中,创建store之前进行Redux DevTools配置

   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;
   // 利用store来保存状态（state）
   // const store = createStore(reducer, storeEnhancer)
   const store = createStore(reducer, composeEnhancers(storeEnhancer))

3 打包后结果

懒得下载打包的同学，可以直接下载我打包好的：redux-devtools