redux devtools插件(redux devtools介绍)

摹客超级版激活码领取链接
👉戳我 (戳此处,速领)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以下的版本,才可以打包成功。 以下是打包过程中报错的解决方案。

    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,简洁实用有趣的工具应有尽有。

图片[1]-redux devtools插件(redux devtools介绍)-不靠谱程序员

图片[2]-redux devtools插件(redux devtools介绍)-不靠谱程序员

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

FinClip小程序容器-让任何App快速运行小程序: 👉戳我 https://www.finclip.com
云顶之弈-阵容搭配工具: 👉戳我 http://tftgamer.com(每赛季更新)
免费AI视频生成网站: 👉戳我 https://ai-text-to-video.com(ai text to video)
© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享