👉戳我 (戳此处,速领)https://www.mockplus.cn/get-idoc?hmsr=qd-moon
激活码:MKCX-2024
哈喽,大家好,我是指南君,导航搬砖工一名,致力于为大家淘出更多有趣好使的生产力工具,力争成为导航爸爸!
今天为前端童鞋搬一款追“妹纸”神器。
话不多说,上妹(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以下的版本,才可以打包成功。 以下是打包过程中报错的解决方案。
- 报错: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获取打包好的插件。
以上就是本次推荐的全部内容。
指南君有话说
redux-devtools作为追妹纸的好帮手,已经是
更多好用工具
想知道更多好用工具,欢迎访问www.cxy521.com,简洁实用有趣的工具应有尽有。
我是指南君,感谢各位童鞋的:点赞、收藏和在看,我们下期更精彩!
FinClip小程序容器-让任何App快速运行小程序: 👉戳我 https://www.finclip.com云顶之弈-阵容搭配工具: 👉戳我 http://tftgamer.com(每赛季更新)
免费AI视频生成网站: 👉戳我 https://ai-text-to-video.com(ai text to video)