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

3.打包结果

​懒得下载、打包的同学，可以直接下载我打包好的redux-devtools。获取方式：点击下方卡片，回复redux-devtools获取打包好的插件。

以上就是本次推荐的全部内容。

指南君有话说

redux-devtools作为追妹纸的好帮手，已经是

更多好用工具

想知道更多好用工具，欢迎访问www.cxy521.com，简洁实用有趣的工具应有尽有。

我是指南君,感谢各位童鞋的：点赞、收藏和在看，我们下期更精彩！