Redux 调试神器 Redux DevTools 初探

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前端开发中,Redux 是一个非常流行的状态管理库。但是当我们在复杂的应用中使用 Redux 的时候,调试可能会变得比较麻烦。为了解决这个问题,Redux 提供了 Redux DevTools。本文将详细介绍 Redux DevTools,并提供相关学习和指导意义。

什么是 Redux DevTools?

Redux DevTools 是一个可以让你实时编辑、排查和调试 Redux 应用程序的 浏览器扩展。它包括三个部分:

  1. Chrome 浏览器扩展
  2. 内嵌到你的应用程序中(只在开发环境中启用)
  3. 一个独立的 Electron 应用程序(Redux DevTools Dock)

通过使用 Redux DevTools,你可以:

  • 检查应用程序状态的变化
  • 追溯状态的历史记录
  • 非常快速地重放状态
  • 当状态更改时,监视可以显示所有事件,例如触发 action 和分发 reducer

如何使用 Redux DevTools?

首先,你需要安装 Redux DevTools 扩展程序。

在浏览器中安装扩展程序:

  1. 打开 Chrome 应用商店。
  2. 搜索 Redux DevTools,并安装。
  3. 安装完成后,在开发模式下启动 Chrome 浏览器。

在项目中启用 Redux DevTools:

  1. npm 安装 redux-devtools-extension。
  2. 在 store.js 中引入 createStore 和 applyMiddleware函数,然后将 createStor 函数替换为 Redux Toolkit 中的 configureStore 函数,再通过调用window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION() 将 Redux DevTools 添加到应用程序中。
------ - -------------- - ---- ------------------
------ - ----------- - ---- ------------
------ --------------- ---- -------------

------ ----- ----- - ----------------
  -------- ------------
  ----------- ------------------
  --------- ----------------------------------- -- -------------------------------------
--

最后,启动应用程序并打开 Chrome DevTools,即可开始使用。

Redux DevTools 常用操作

Time Travel (时光旅行)

Time Travel 是 DevTools 中的一个最常用功能。它使你能够回顾应用程序状态的历史记录,从而让你了解每个状态都发生了什么。

Dispatch(分发)

Dispatch 是 Redux 中的一个概念,它表示将 action 插入到 Redux 应用程序状态的过程。这就是 Redux DevTools 中 Dispatch 常用于查看 action。

Diff(差异)

差异显示了当前 state 怎样和上一个 state 发生了变化。

Redux DevTools 和 React Hooks

从 React Hooks 的版本 16.8.0 开始,我们可以像下面这样在我们的功能组件中使用 Redux:

------ ----- ---- -------
------ - ------------ ----------- - ---- -------------
------ - ---------- --------- - ---- -----------

-------- ------- -- -
  ----- ----- - ----------------- -- ------------
  ----- -------- - -------------

  ------ -
    -----
      ------- ----------- -- ---------------------------------
      ----------------
      ------- ----------- -- ---------------------------------
    ------
  -
-

------ ------- -------

好处是:

  • 只要当 state 发生变化时重新渲染组件;
  • 省去了 mapStateToProps 和 mapDispatchToProps;
  • React Hooks 控制的程度更精确。

但随之,Redux DevTools 就不能准确地捕捉到数据变化并显示。

因此,我们需要在 useStore 这个 hook 中,手动调用 window.REDUX_DEVTOOLS_EXTENSION.而不是在 createStore 阶段。

------ - -------- - ---- -------------
------ - --------- - ---- -------

-------- ---------------- -- -
  ----- ----- - ----------

  ------------ -- -
    -- --------------------- --- ------------ -- ------------------------------------ -
      ---------------------------------------------
      ------------------------------------------------ -- -
        ----- ----- - ----------------
        ------------------------------------------ ----- --
      --
    -
  -- --------
-

结论

在 Redux DevTools 中,我们可以轻松地回溯状态的历史记录,调试和检查我们的应用程序状态,还可以保存现场。通过对 Redux DevTools 的使用,我们可以更方便地进行前端开发和调试,并加深我们对 Redux 的理解。

可以到官网查看更多配置信息和操作步骤。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/672a020addd3a70eb6ceee3f


猜你喜欢

  • 如何在 Fastify 中使用批处理技术提高性能

    对于一个前端开发者来说,提高性能无疑是开发过程中最重要的目标之一。而在后端开发中,提高性能的方法也有很多。其中,批处理技术是一种非常有效的方法,可以在很大程度上提高应用程序的性能。

    6 天前
  • 在 Nest.js 中使用 GraphQL 实现 RESTful API

    RESTful API 是一种常用的 Web API 设计风格,而GraphQL 也是近年来备受瞩目的前端技术,它可以简化 API 的处理过程,提高请求效率,提供更好的开发体验。

    6 天前
  • TypeScript 中如何跳过某些编译操作

    导语 TypeScript 是一种静态类型的 JavaScript 超集,它可以让你从 JavaScript 编写的代码中获取更多的安全检查和语言功能,使前端开发更加高效。

    6 天前
  • Redux 和 MobX 的优缺点比较及使用场景分析

    在进行前端开发时,我们经常需要管理应用程序的状态。Redux 和 MobX 是两种非常流行的状态管理库。它们都有自己独特的优缺点。本文将比较它们的差异并提供适用场景的分析。

    6 天前
  • 如何正确配置 Webpack+Babel 进行前端打包

    在现代前端开发中,Webpack+Babel 是很常用的组合,Webpack 可以将多个 JavaScript、CSS、图片等文件打包成一个或多个 bundle,Babel 可以将新版 JavaScr...

    6 天前
  • 前端性能优化之测量及评估

    介绍 前端性能是用户体验的重要因素之一,一个快速响应的页面能够让用户更好地享受在线服务。而优化前端性能的过程是一个复杂的过程,需要关注多个因素,并且需要测量和评估每一个因素,以便找到性能瓶颈并采取有效...

    6 天前
  • 使用 Jest 测试 React 应用中的错误处理

    在 React 应用开发过程中,错误处理是一个非常重要也非常常见的问题。在开发过程中,我们需要处理诸如网络请求失败、代码抛出异常等错误。同时,在产品上线后,准确地捕捉并上报错误也非常重要。

    6 天前
  • 如何在 Kubernetes 集群中进行灰度发布

    Kubernetes 是一个流行的容器编排工具,它允许我们管理和扩展容器化应用程序。灰度发布是一种部署策略,它允许我们逐步地将新版本的应用程序引入到生产环境中,以减少潜在故障和风险。

    6 天前
  • GraphQL 与微服务架构:如何集成服务

    本文将讨论 GraphQL 与微服务架构的集成,探讨如何通过 GraphQL 集成微服务架构,提高应用程序的可伸缩性,健壮性和可维护性。我们将详细探讨 GraphQL 解决的问题,提供可伸缩性和可维护...

    6 天前
  • Cypress 测试框架:如何测试 Firebase 身份验证?

    前言 Cypress 是一个流行的前端端到端测试框架,它提供了许多功能来帮助我们编写更健壮的测试用例。Firebase 身份验证是一个常见的使用场景,在本篇文章中,我们将介绍如何使用 Cypress ...

    6 天前
  • 如何优化 JS 的性能,以掌握快速开发

    在前端开发中,JavaScript 是不可或缺的一部分。它使得我们可以在网页上实现各种动态效果和交互行为。但是,由于客户端计算机数据处理能力的限制,JavaScript 可能会在处理较大或复杂的数据集...

    6 天前
  • 无障碍技术进阶:如何创造更好的语音控制体验

    语音控制作为一种主流的无障碍技术,被越来越广泛地应用于各种设备和应用程序中。但是,在实际操作中,许多人发现,语音控制并不总是如他们所愿地运作。本文将为大家介绍一些创造更好的语音控制体验的方法,从而帮助...

    6 天前
  • Jest 测试 Redux 应用中 action 的问题及解决方案分享

    在开发 Redux 应用时,我们常常需要测试 action 是否能够正确地触发 state 的更新。而 Jest 是一款常用的 JavaScript 测试工具,它不仅易于使用,而且与 React 生态...

    6 天前
  • 如何使用 Next.js 和 Firebase 构建实时应用

    在现代Web应用程序开发中,实时Web应用程序是一个非常流行的范例。实时Web应用程序有许多优点,例如即时性、可扩展性和可靠性。这个范例的主要思想是客户端能够接收到实时更新的数据,而不需要刷新页面。

    6 天前
  • MongoDB in Action 快速学习指南

    概述 MongoDB是一个开源的文档数据库,旨在提供高性能,高可靠性和易于扩展。它使用了 JSON 格式的文档存储数据,可以轻松地存储和查询任何类型的数据。在当前互联网应用程序的开发中,MongoDB...

    6 天前
  • 如何使用 Fastify 和 Elasticsearch 进行全文检索

    在现代的网站和应用中,全文检索是一项非常重要的功能。为了实现这个功能,我们通常需要将数据存储在一个搜索引擎中,并编写一个可搜索数据的界面。 在本文中,我们将介绍如何使用 Fastify 和 Elast...

    6 天前
  • Kubernetes 中的 Kubelet 和 Pod 生命周期

    Kubernetes 是一个用于自动化部署、扩展和管理容器化应用程序的开源平台。在 Kubernetes 中,Kubelet 是 Kubernetes 集群中运行在每个节点上的主要代理程序之一。

    6 天前
  • 如何使用 GraphQL Variables 在 Headless CMS 中构建动态查询?

    本文将介绍如何使用 GraphQL 变量构建动态查询,以此来提高插件的灵活性和适用性。我们将以 Headless CMS 为例,具体说明 GraphQL Variables 的使用方法,帮助读者更深入...

    6 天前
  • Mongoose 使用 Promise 时常见的问题和解决方案

    Mongoose 使用 Promise 时常见的问题和解决方案 Mongoose 是 Node.js 中最受欢迎的 MongoDB 驱动之一,特别是在构建 Web 应用程序时。

    6 天前
  • Node.js 中如何实现缓存控制

    在 Web 开发中,缓存是提高网站性能的重要手段,通过缓存可以显著减少服务器的响应时间,提升用户体验。对于 Node.js 这种基于 JavaScript 的运行时环境来说,实现缓存控制同样非常重要。

    6 天前

相关推荐

    暂无文章