redux devtools插件（redux devtools介绍）-不靠谱程序员

哈喽，大家好，我是指南君，导航搬砖工一名，致力于为大家淘出更多有趣好使的生产力工具，力争成为导航爸爸！

今天为前端童鞋搬一款追“妹纸”神器。

~~话不多说，上妹（shen）纸（qi）！~~

此妹纸姓redux，名state，是前端童鞋的最爱。

前端童鞋们使用React开发项目必用redux，这不用还好，一用就得有追妹纸的场景。

只可惜妹纸的心变化多端，打着断点都难猜。console.log(“□□□□”)都盖不住我那追脱了发的脑阔。

这可怎么办？求助Redux Devtools呗!

什么是Redux DevTools?

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

大白话就是：类似于Vuex。

完整项目地址：https://github.com/reduxjs/redux-devtools
Redux DevTools chrome扩展程序地址：https://github.com/zalmoxisus/redux-devtools-extension（用于下载工具压缩包）

如何使用Redux DevTools

网络允许的小伙伴们可以直接在Chrome的网上应用商店搜索redux-devtools安装插件即可完成。

无法科学上网安装redux-devtools插件的同学，可继续阅读下文：打包安装Redux DevTools。

打包安装Redux DevTools

1.在浏览器中安装Redux DevTools

下载文件：Redux DevTools chorm扩展程序地址：https://github.com/zalmoxisus/redux-devtools-extension（用于下载工具压缩包）；
解压redux-devtools-extension-2.17.1；
打开控制台，在控制台中找到redux-devtools-extension-2.17.1文件夹目录，安装依赖：
```
npm i
```
打包扩展程序：
```
npm run build:extension
```
注意：我打包扩展程序时，使用的Node.js版本为11.15.0，使用Node.js的版本为12以上时，会遇到ReferenceError: primordials is not defined的报错。试了多种解决方法后，发现使用node12以下的版本，才可以打包成功。以下是打包过程中报错的解决方案。
1. 报错：ReferenceError: primordials is not defined解决方案：直接降级Node.js版本，一般使用11.x.x的版本
2. nvm安装后，使用nvm use xxx显示切换版本成功，但使用nvm ls查看node版本任未变化原因及解决办法：
  - 无效原因：Node.js默认安装目录没有安装相对应的Node.js版本。
  - 解决办法:
    1. 删除Node.js文件夹，
    2. 卸载Node.js版本：nvm uninstall xxx
    3. 重新安装Node.js版本：nvm install xxx
    4. 切换版本：nvm use xxx，就能生效了。
chrome中，使用打包好的文件安装插件；
按F12进入工具栏，就多出了Redux选项。

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))