Redux DevTools

概述

我们可能已经了解到，处理 Redux 似乎因为诸如 store、actions、reducers、middleware 等花哨的术语而令人望而生畏。但这里有一个诀窍。我们是否看到过这种情况？这正是 Redux Devtools 发挥作用的地方。通过将其用作扩展，我们可以 可视化 Redux 应用程序底层发生的这些复杂概念和事件。在本教程中，我们将通过各种示例，介绍设置 store 以获取有关 middleware 知识的简单但神秘的任务。本教程假设我们对 Redux 中的 middleware、store 和 actions 的设置有基本了解。那么，让我们继续。

Redux DevTools 是一个 开发时间包，可为我们的 Redux 开发工作流程提供强大的功能。主要重点是牢记代码剥离，以便在生产环境中进行部署。要使用 Redux DevTools，我们首先需要选择一个 React 组件，该组件将提供出色的 UI，以便轻松地进行开发过程。UI 的组合至关重要，因为不同的应用程序使用不同的 UI。因此，Redux DevTools 在这方面进行构建，以保持这种想法的灵活性，这样开发者就不必为此方面而惊慌。另一个要记住的重要方面是拥有一个基于 React 组件的“监视器”。我们强烈建议使用 LogMonitor 来检查状态和时间，然后将其包装到 DockMonitor 中，以便快速地在屏幕上移动。这使得通过 Redux 进行开发更加简单，因此得名 DevTool。

什么是 Redux DevTool 扩展？

DevTool 是一个基于 Chrome 的扩展，它提供一个控制台，我们可以在其中使用 Redux 设置我们的开发环境。此扩展有助于可视化 Redux 应用程序中通常会发生的操作和状态更改。我们将尝试通过为示例应用程序设置其扩展来理解这一点。使用 Google Chrome 设置此扩展非常容易。请参阅以下步骤将此扩展添加到浏览器。

环境设置方法

工作流程

为了理解工作流程和事物的运作方式，我们将分步为简单项目设置 Redux DevTools。步骤包括：

1. 将 Redux DevTools 扩展添加到我们的浏览器。
2. 安装 Redux DevTools 依赖项并将 Redux DevTools 添加到 store。
3. 在 Redux DevTools Console 中可视化 store 和 actions。

添加扩展

从浏览器下载并安装 Redux DevTools。如下图所示，将扩展添加到浏览器。

添加扩展后，我们可以在浏览器右上角看到图标，如下图所示。

安装 DevTools 依赖项

要安装 Redux DevTools 的依赖项，我们所要做的就是在系统中运行一些命令。开发依赖项可以使用以下命令提供。

在此步骤之后，我们应该使用以下方法从 Redux DevTools 导入 compose 功能：

下一步是使用下面的方法创建 store：

安装这些依赖项的主要目标是探究我们的 store 并查看状态和操作。它还可以称为诊断工具，用于查看正在发生的情况。下面的代码片段提供了另一种创建 store 的方法，该方法表示一个带有 Redux DevTools 扩展的 store。

在此步骤之后，让我们安装 middleware，因为 Redux 中的 middleware 使得使用异步网络调用并相应地保持更新成为可能。在下面的示例中，我们将看到带有 middleware 的 store 是什么样的，以及如何为它设置 DevTools。因此，在下面的示例中，我们将使用 Redux-promise middleware。以下是代码片段和命令。

该命令将所有基于 promise 的 middleware 安装到 Redux 中。

Redux DevTools Console 详解

既然我们已经从 store 到依赖项设置好了一切，让我们来理解主要内容。由于我们已经正确安装了 Redux DevTools 的浏览器扩展，我们将探索控制台并讨论其功能。

假设一切都已正确安装，当我们单击此新选项时，我们可能会看到类似这样的内容。

让我们尝试分解上面控制台中显示的一些选项。

左侧控制台工具

仪表板的左侧列显示了自操作创建者类型定义以来，当前页面上正在触发的实时操作。

这带有一个顶部的过滤器选项，每次操作在之前的操作之后触发时，该选项就会弹出，并显示 Jump 和 Skip 两个选项。在这里，我们可以看到时间旅行和更改应用程序视图。Jump 选项将我们的应用程序带到操作触发时的状态，而 Skip 选项会划掉该操作，以显示在没有该操作的情况下应用程序会是什么样子。

这些选项倾向于操纵应用程序的实时工作环境，并让我们看到在操作触发之前和之后的操作将如何表现。

右侧控制台工具

DevTools 的右侧由该工具的四个最有用的选项组成。选项如下所示。

Diff

它使我们能够查看应用程序的状态以及它在状态中为每个操作服务的关系。

每当我们从控制台左侧选择一个操作时，Diff 选项将仅显示该单个操作在状态树中更改的内容。

操作

当我们单击它时，Action 选项卡显示单个操作类型以及由 reducers 携带的任何内容。

以上面的图像为例，操作具有典型的功能/FETCH_SUCCESS，并且它还将数据和请求的功能传递给 reducer。我们可能已经注意到，在主操作选项卡内有三个子选项卡：Tree、Char 和 Raw。它们只是用于以不同格式显示相同的数据。准确地说，Tree 视图是默认视图，它将数据总结为单行，而 Chart 选项卡显示最新的 store 树，而 Raw 选项显示所有包含的 reducers 与相应数据分支的组合。Raw 选项卡还以代码视图显示操作创建者。它看起来像这样。

国家

此选项卡显示在控制台左侧选择操作时整个状态树。

测试

此选项卡用于在某些预先提供的先前测试框架中创建测试格式。它还考虑了根状态，并提供了关于最终状态应包含什么的编写测试。

顶部控制台

顶部控制台提供另外两个选项卡。右侧选项卡允许我们在页面上当前运行的应用程序的两个实例之间切换，如果我们有不同的 store 在同一页面上运行。左侧选项卡显示两种不同的模式，即 inspector mode，它主要被视为默认节点，用于查找应用程序中使用的不同工具。另一个选项是 Log Monitor，它显示所有操作和状态，以及一个滑块选项，用于放大和观察树的增长或收缩。Chart 以树状结构显示状态。

底部控制台

控制台底部增加了一些附加功能，用于对操作和状态执行操作。它还允许时间旅行、查看已分派的操作、导入和导出状态以及远程控制它们。

从左侧开始，前三个选项主要用于创建新的控制台或在左、右或底部查看。接下来是 Pause 选项，用于停止控制台中创建的操作的录制。
然后是下一个选项，即 Lock Changes，它将冻结正在运行的应用程序或未来应用程序的功能。它将 Pause recording 提升到一个新的水平，通过创建锁来避免应用程序中未来的状态更改。下一个选项是 Persist，即使我们重新加载页面，它也会保留其当前状态。最后一个选项是 Dispatcher，它显示或隐藏分派模块。如果提供了自定义数据，它还会触发自定义操作。

总结

在本文中，我们从最基础的 Redux DevTools 开始，了解了如何安装它以及控制台中的高级选项如何让我们构建和可视化操作。Redux DevTools 不仅提供了对分派和操作或状态管理选项的控制，还让我们能够可视化它们，以便于管理。之后，我们学习了如何设置 store 并使用 middleware 调整系统。记录操作和状态是一个复杂的过程。但有了 Redux DevTools，就可以轻松地控制和操作它们。我们在本文中学到的另一个事实是关于提供的控制台功能，这些功能可以将控制提升到新的水平。总之，我们可以说 Redux 本身是空的，无法运行，但 DevTools 增强了它的整体使用和性能。