前言
Redux 是一个非常受欢迎的 JavaScript 应用程序状态管理库。在 Redux 中，状态通常存储在单一的存储库中。这使得状态调试工具的实现变得容易，并且为开发人员提供了丰富的工具和方法来查看和调试状态。
本文将介绍一款常用的 Chrome 插件 -- Redux DevTools，它提供了一个强大的界面来帮助开发人员在开发 Redux 应用时快速调试状态。
Redux DevTools 简介
Redux DevTools 是为 Redux 应用程序设计的一组称为"DevTools"的 Chrome 和 Firefox 扩展程序。该插件向开发人员提供了一个丰富的工具集，使开发人员能够调试 Redux 应用程序的状态。Redux DevTools 与 Redux 结合使用，提供了一个强大的界面来帮助开发人员快速调试状态。在 Redux DevTools 界面中，你可以轻松地查看各种状态，包括 action、state、store、dispatch、middleware 和 reducer 等等。
安装 Redux DevTools
Redux DevTools 可以通过 Chrome Web Store 安装，你可以在 Chrome Web Store 中搜索 Redux DevTools 并进行下载和安装。另外，你也可以通过 GitHub 下载 Redux DevTools 的源代码，并将其安装为开发依赖项。
如何使用 Redux DevTools
要使用 Redux DevTools，你需要在你的 Redux 应用程序中集成它。Redux DevTools 接受一个中间件作为参数，并允许开发人员连接到 DevTools 界面。
首先，在项目中启用 Redux DevTools：
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ - ------------ - ---- ---------------
------ ----------- ---- -------------
----- ---------------- - ---------------
----- ---------------- - ------------------------------------------- -- --------
----- ----- - ------------
------------
-----------------
----------------
-----------------
--
--
--然后，你需要安装 Redux DevTools 插件。在 Chrome 中，你可以在开发者工具栏中找到 Redux DevTools 的图标，如下图所示：
点击 Redux DevTools 图标，你会看到一个弹出窗口，其中包含 Redux DevTools 界面。
现在，你可以在这个界面中查看你的 Redux 应用程序的状态。你可以使用 DevTools 界面中提供的各种工具来查看、修改和调试状态。在下面的部分中，我们会更详细地介绍每个部分和工具的作用。
Redux DevTools 界面
Redux DevTools 界面由以下四个主要部分组成：
- Action 列表
- State 快照
- Store 中间件
- Dispatch 器状态
下面我们逐步分别介绍这些部分和它们的作用。
Action 列表
Action 列表是 DevTools 界面的左侧窗格。它显示了应用程序中经过的每个 Redux action。你可以使用这个部分来查看、选择、筛选和调试 action。
State 快照
State 快照是 DevTools 界面的主要窗格。它显示了与 Redux store 一起使用的当前 state 快照。你可以使用这个部分来查看、筛选、类比和调试 state。
在 State 快照中，你还可以使用以下三个工具来操作和调试状态：
时间旅行 Slider：该滑块使你能够快速跨越应用程序的时间轴，以查看应用程序在过去的任何时间的状态。
切换 Action 模式：该工具允许你切换应用程序的行为，以查看不同行为下的应用程序状态。你可以使用这个工具来查看不同 action 之间的状态变化。
Rollback：该工具允许你回滚到以前的 state。
Store 中间件
Store 中间件是 DevTools 界面的右侧窗格。它显示了当前 Redux store middleware 的列表。你可以使用这个部分来查看、选择、筛选和配置中间件。
Dispatch 器状态
Dispatch 器状态是 DevTools 界面的底部窗格。它显示了当前的状态，包括 store、state 和 action 的详细信息。你可以使用这个部分来查看和调试应用程序的状态。
总结
Redux DevTools 是一个非常有用的工具，它为开发人员提供了一种方便快捷的方式来调试 Redux 应用程序。开发人员可以使用 DevTools 界面中提供的各种工具来查看、修改和调试状态。在本文中，我们介绍了 Redux DevTools 的主要部分、如何安装和集成它、以及如何使用它来调试应用程序状态。希望本文对你的工作和学习有所帮助。
示例代码
-- -------------------- ---- -------
-- ----------
------ ----- -------- - -----------
------ ----- ----------- - --------------
--- ---------- - --
------ -------- ------- ------ -
------ -
----- ---------
--- -------------
----
--
-
------ -------- ---------- ---- -
------ -
----- ------------
--
--
-
-- -----------
------ - --------- ----------- - ---- ------------
----- ------------ - -
------ --
--
------ ------- -------- ------- ------ - ------------- ------- -
------ ------------- -
---- ---------
------ ----------------- ------ -
------ -
---------------
-
--- ----------
----- ------------
---------- -----
-
-
---
---- ------------
------ ----------------- ------ -
------ -------------------- -- -
-- -------- --- ---------- -
------ ----------------- ----- -
---------- ---------------
---
-
------ -----
--
---
--------
------ ------
-
-
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ------- ---- -------------
------ --- ---- -------------------
----- ----- - ---------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--
-- ------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- ---------- - ---- -------------
----- --- ------- --------- -
------------------ -
-------------
------------- - -------------------------
-------------------- - --------------------------------
------------- - ------------------
-
----------- -
-------------------
----- ----- - ----------------------
-- --------------------- -
-------
-
------------------------------------------
----------- - ---
-
------------------- -
------------------------------------
-
-------- -
----- - ----- - - -----------
------ -
-----
-------- ---------
----- -------------------------
------ ------------------- --
------- ----------------- -------------
-------
----
--------------- -- -
--- --------------
------
---------------
------------------------
----------- -- ------------------------------
--
-----------
-----
---
-----
------
--
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
------ ------- ------------------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64653611968c7c53b05f6782