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以下的版本，才可以打包成功。
以下是打包过程中报错的解决方案。

报错：ReferenceError: primordials is not defined解决方案：直接降级Node.js版本，一般使用11.x.x的版本

nvm安装后，使用nvm use xxx显示切换版本成功，但使用nvm ls查看node版本任未变化原因及解决办法：
无效原因：Node.js默认安装目录没有安装相对应的Node.js版本。

解决办法:
删除Node.js文件夹，

卸载Node.js版本：nvm uninstall xxx

重新安装Node.js版本：nvm install xxx

切换版本：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。获取方式：进入此链接下载
链接收费或者有其它问题的，可以私信获取。
以上就是本次推荐的全部内容。

Redux DevTools工具的安装相关推荐

Chrome浏览器安装 React Developer Tools和Redux DevTools插件
正文: 1. 首先,下载react-developer-tools开发调试工具插件.(下面还要安装redux插件,一并给出) react插件: 链接: https://pan.baidu.com/s/ ...
一个好用的查看Angular应用ngrx状态的Chrome扩展：Redux devTools
Redux DevTools: https://chrome.google.com/webstore/detail/lmhkpmbekcpmknklioeibfkpmmfibljd 安装完毕后,在Ch ...
Chrome插件 Redux DevTools
简介 Redux DevTools可以有效地对应用程序或者网页的状态进行调试操作,这个插件拥有丰富的设置参数和可视化工具,可以随时查看到触发的action的变化. 简单使用需要(找梯子)在Chro ...
mysql 物理备份工具_mysql物理备份工具Xtrabackup安装配置
mysql物理备份工具Xtrabackup安装配置 1Xtrabackup工具介绍 Xtrabackup是一个对InnoDB做物理数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具 ...
Xamarin.Form的Android SDK工具下载安装
Xamarin.Form的Android SDK工具下载安装本节将讲解如何下载Xamarin.Form的Android SDK工具,并使用其中的工具管理Android SDK,如何创建模拟器等内容. ...
虚拟机增强工具的安装
虚拟机增强工具的安装一.安装目的 1.实现界面平铺 2.实现虚拟机和物理机的交互 3.实现文本的粘贴复制,不过不能够直接把物理机上的文件直接拖到界面,而是要指定位置. 二.安装步骤接着打开终端,用 ...
通过GPG非对称加密工具验证ECharts发布版本实例演示，win10下Gnu Privacy Guard工具的安装和使用方法
GPG 验证 ECharts 发布版本实例演示第一章:Gpg 工具的安装 ① Gpg 工具的下载 ② Gpg windows 版 Gpg4win 的安装 ③ Gpg 安装是否成功状态检测第二章:使 ...
Jupyter 工具的安装与使用方法，jupyter运行python代码演示，好用的python编辑器推荐！
Jupyter 工具的安装与使用第一章:环境搭建 ① Jupyter 工具的安装 ② Jupyter 服务的启动 ③ Python 代码运行演示第二章:详细过程展示 ① Jupyter 详细安装过 ...
php性能测试下载,PHP性能测试工具xhprof安装与使用方法详解
本文实例分析了PHP性能测试工具xhprof安装与使用方法.分享给大家供大家参考,具体如下: xhprof概述: XHProf是一个分层PHP性能分析工具.它报告函数级别的请求次数和各种指标,包括阻塞 ...