使用 redux-devtools-extension 查看 Redux 中状态变化

最新推荐文章于 2024-05-13 22:16:07 发布
最新推荐文章于 2024-05-13 22:16:07 发布
阅读量8.8k 收藏 10
点赞数 2
分类专栏： 前端开发 React Redux 文章标签： 前端开发 React Redux Redux-Devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgd826237710/article/details/86170945
版权
本文介绍了如何在 Redux 中利用 redux-devtools-extension 插件进行状态变化的可视化查看。首先，文章提供了源码地址，并强调需要预先安装 Redux。接着详细阐述了插件的安装步骤，包括在谷歌浏览器中安装和在代码中添加使用方法。此外，还讨论了在 Redux 集成其他中间件和仅在开发环境使用的场景。
摘要由CSDN通过智能技术生成

文章目录

本文简单介绍了在 Redux 使用 redux-devtools-extension 插件的用法，可以对状态变化进行可视化查看。

本文例子源码

源码地址

欢迎 Star！欢迎 Watch！

前提条件

请先安装 redux：npm install redux -S

redux-devtools-extension 的使用

用法非常简单，只需要三步，而且代码修改极少，跟着下面的提示进行操作即可

插件安装

$ npm install redux-devtools-extension -D

在谷歌浏览器中安装 Redux DevTools

  • 如果可以访问谷歌扩展程序，直接在 Chrome 网上应用商店下载即可

  • 如果不能访问，可以百度搜索资源进行下载

  • 下载完成之后

    • 可以在浏览器工具栏右上角可以看到图标（当应用可以使用该工具时，图标变亮）
      图标

    • 在页面上右键可以看到 Redux DevTools 选项

    • 打开控制台，在菜单栏可以找到 Redux 菜单栏
      此时项目中尚未应用工具，面板应该这样显示：
      未应用

最低0.47元/天 解锁文章
浮沉半生
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
安装 redux-devtools-extension
xm1037782843的博客
10-30 1117
安装 redux-devtools-extension
react（56）——在项目中使用开发者工具redux-devtools-extension
木子 旭的博客
03-24 771
1.谷歌安装插件 需要访问外网，在谷歌商店中下载，也可以自己格外找资源 2.项目中添加redux-devtools-extension库 在终端运行cnpm add redux-devtools-extension即可 3.在store.js文件中添加redux-devtools-extension库中的内容 //该文件专门用于暴露一个store对象，整个应用只有一个store //引入createStore import { createStore,applyMiddleware,combineR
React-49：redux-devtools-extension开发者工具
臧小川的博客
09-02 287
谷歌下载插件 Redux DevTools 命令行下载 yarn add redux-devtools-extension store文件中引入谷歌插件并使用 import { composeWithDevTools } from 'redux-devtools-extension' const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk))) ...
探索Redux DevTools Extension：提升React应用开发效率的新工具
gitblog_00030的博客
03-19 395
探索Redux DevTools Extension：提升React应用开发效率的新工具 redux-devtools-extensionzalmoxisus/redux-devtools-extension: 是一个用于Redux的开发者工具扩展。适合用于需要调试和监控Redux应用的状态管理。特点是可以提供实时的状态查看、行动日志和错误检测等功能。项目地址:https://gitcode.c...
redux-devtools-extension：Redux DevTools扩展
02-03
Redux DevTools扩展 安装 1.对于Chrome 从 ; 或从下载extension.zip ...请注意，从v2.7开始， window.devToolsExtension重命名为window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
redux-devTools
08-20
redux-devtools.crx 版本 2.15.3 大小 5.6 MB 解决 使用安装redux.devTools后 Cannot read property 'state' of undefined 问题
Redux-DevTools 3.0.11 谷歌插件
10-14
Redux-DevTools 3.0.11 谷歌插件，此版本插件会有一个报错，"manifest_version": 2 内部提示为：“Manifest version 2 is deprecated, and support will be removed in 2023” 不影响正常使用，如在意请勿下载。
reduxdevtoolsextension2.17.0
02-25
React这块发展很快，相关工具链（redux，flux，webpack等）更新比较快，在redux-devTools 2.15.1版本之前会出现这个问题，如果你是老版本的redux-devTools，建议升级到最新版本，这个报错问题就解决了
redux-devtool-extension-2.17.1.zip
11-01
redux-devtool-extension-2.17.1 ,2019年1月26日发布，。1、解压zip文件夹 2、浏览器打开chrome://extensions 3、选择左上角“加载已解压的扩展程序” 4、选择第一步解压后的文件夹。 项目中 1、添加依赖 npm install --save redux-devtools-extension 2、store 文件中引入import {composeWithDevTools } from "redux-devtools-extension" 3、const store = createStore(allReduce,composeWithDevTools())
redux-devtools-extension 使用
HH
03-17 743
import {createStore, applyMiddleware, compose } from 'redux' import todoApp from './reducer/index' import thunk from 'redux-thunk' // let store = createStore(todoApp, // window.__REDUX_DEVTOOLS_...
使用redux-devtools-extension
qq_36249659的博客
03-01 523
浏览器安装 store.js import {createStore,compose} from 'redux' import reducer from './reducer' const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store=createStore(...
【React】redux开发者工具redux-devtools-extension的安装和使用
最新发布
fangyuan__的博客
05-13 561
redux-devtools-extension: 是一个用于Redux的开发者工具扩展。适合用于需要调试和监控Redux应用的状态管理。特点是可以提供实时的状态查看、行动日志和错误检测等。
Redux DevTools Extension 的使用
weixin_30467087的博客
10-23 182
网址 https://github.com/zalmoxisus/redux-devtools-extension 1.const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 2.import { createStore,compose} from 'redux'; ...
React模块开发redux-devtools-extension调试工具
蜗牛不会跑
10-31 5294
用法 注意，从v2.7开始, window.devToolsExtension 被重命名为 window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__. 1. With Redux 1.1 Basic store 对于基本的Redux store存储，只需添加即可 const ...
redux-devtools-extension 查看 Redux 中状态
TheZarathustra的博客
03-09 399
1.安装 Redux DevTools 浏览器插件 2.项目引入依赖 yarn add redux-devtools-extension -D 3.在store 配置 import { composeWithDevTools } from 'redux-devtools-extension'; // 写法1:有中间件 const store = createStore(reducer, composeWithDevTools( applyMiddleware(thunk, logger)
模块开发之redux-devtools-extension调试工具使用详解(十一)
热门推荐
陈袁的博客
07-02 1万+
模块开发之redux-devtools-extension调试工具使用详解(十一) 模块开发之redux-devtools-extension调试工具使用详解(十一) 前言 安装调试工具插件 非侵入式 没有使用中间件的情况 使用中间件情况 侵入式 安装 没有使用中间件的情况 使用中间件情况 总结 在chrome浏览器里实战 前言 redux-devtools和r...
整理一下react的知识点之redux-devtools-extension基本使用(持续更新)
数组喜欢打对象的博客
11-15 8284
1. 下载相关包 npm i redux react-redux redux-thunk redux-devtools-extension 2.安装react开发工具（chrome浏览器插件） 3. 安装redux的开发工具（chrome浏览器插件） 4.在store/index.js中进行配置导入 import { createStore, applyMiddleware } from 'redux' import rootReducer from './reduce...
redux-devtools-extension如何使用
04-12
对于redux-devtools-extension 的使用，您可以在您的Redux Store中使用compose函数将redux-devtools-extension与您的Redux Store集成。此外，您还需要在浏览器中安装相应的Redux devtools扩展程序。这个过程在每个...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值