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

3.打包结果

​懒得下载、打包的同学，可以直接下载我打包好的redux-devtools。获取方式：进入此链接下载
链接收费或者有其它问题的，可以私信获取。
以上就是本次推荐的全部内容。