Redux 是一个流行的 JavaScript 应用程序状态管理工具。它可以跨组件、跨路由、跨会话等跟踪应用程序状态，并提供了一些好用的中间件和工具，助力开发者更易于理解和维护应用程序。其中，Redux DevTools 是一个功能强大的浏览器扩展，它可以帮助开发者在浏览器中查看、监控和调试 Redux 应用程序。
在本文中，我们将介绍 Redux DevTools 的使用技巧，并提供一些示例代码和最佳实践。阅读本文后，您将会掌握如何：
- 安装和启用 Redux DevTools
- 使用 Redux DevTools 查看应用程序状态
- 调试 Redux 应用程序中的错误
- 追踪 Redux 应用程序性能
- 进阶使用：自定义 Action 监听器、时间旅行等
安装和启用 Redux DevTools
Redux DevTools 是一款免费的浏览器扩展，支持 Chrome、Firefox、Safari 等主流浏览器。您可以从 Chrome Web Store 中搜索 Redux DevTools，点击「+ 添加至 Chrome」即可安装。安装完毕后，您可以在 Chrome 的「扩展程序」页面找到 Redux DevTools，并将其启用。
除了浏览器扩展之外，Redux DevTools 还可以作为一个独立的 Electron 应用程序来运行。如果您想要更加方便地使用 Redux DevTools，可以考虑使用独立应用程序。
我们将在下一节中介绍如何使用 Redux DevTools 查看应用程序状态。
使用 Redux DevTools 查看应用程序状态
Redux DevTools 可以轻松地帮助您追踪应用程序状态。开发者可以在应用程序中通过代码来记录各种状态变化（例如 Action、Reducer、Store 等），然后利用 Redux DevTools 来查看这些变化并进行调试。
下面是一个简单的计数器示例，用以演示如何使用 Redux DevTools 查看状态变化：
-- -------------------- ---- -------
-- ----------
------ ----- --------- - -- -- --
----- -----------
--
------ ----- --------- - -- -- --
----- -----------
--
-- -----------
----- ------------ - - ------ - -
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - -
---- ------------
------ - ------ ----------- - - -
--------
------ -----
-
-
-- --------
------ - ----------- - ---- -------
------ -------------- ---- ------------
------ - ---------- --------- - ---- -----------
----- ----- - ---------------------------
---------------------------
---------------------------在使用 Redux DevTools 之前，请确保您已经将上述代码添加到您的应用程序中，并且已经安装并启用了 Redux DevTools 扩展程序。
现在，您可以在应用程序中按下 ctrl + h 键，或者点击 Chrome 浏览器中 Redux DevTools 的图标，来打开 Redux DevTools。开发者们会在控制台中看到一个包含各种状态变化的历史记录。
在左侧的面板中，开发者们可以看到一系列由 Redux DevTools 记录的状态变化。您可以点击它们来查看各种状态变量的值。在右侧的面板中，您可以查看有关当前选定状态变化的更多详细信息，例如 Action Payload、Reducer 函数、处理后的 State 等。
调试 Redux 应用程序中的错误
Redux DevTools 不仅可以帮助您查看应用程序状态，还能够帮助您调试应用程序的错误。特别是在处理异步请求时，出现错误时，Redux DevTools 可以帮助您更轻松地追踪并排查错误。
下面是一个简单的异步请求示例，可以演示如何使用 Redux DevTools 来调试错误：
-- -------------------- ---- -------
-- ----------
------ ----- ---------- - -- -- -
------ ----- ---------- -- -
--- -
----- -------- - ----- ---------------------------------------------------
----- ---- - ----- ---------------
---------- ----- ---------------------- -------- ---- --
- ----- ------- -
---------- ----- ---------------------- ----- --
-
-
-
-- -----------
----- ------------ - - ---------- ------ ------ --- ------ ---- -
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------------------
------ - --------- ---------- ---- -
---- ----------------------
------ - --------- ---------- ------ ------ -------------- -
---- ----------------------
------ - --------- ---------- ------ ------ ------------ -
--------
------ -----
-
-
-- --------
------ - ------------ --------------- - ---- -------
------ ----- ---- -------------
------ ----------- ---- ------------
------ - ---------- - ---- -----------
----- ----- - ------------------------ -----------------------
----------------------------在此示例中，我们使用了 Redux-thunk 中间件来处理异步请求。请确保您已经安装了 Redux-thunk 并将其添加到 applyMiddleware 中。
现在，您可以像之前一样使用 Redux DevTools 来查看应用程序状态，以及调试您的错误。
追踪 Redux 应用程序性能
Redux DevTools 不仅可以帮助您追踪应用程序状态，还可以帮助您追踪应用程序的性能。特别是在处理大量数据、复杂计算、频繁更新等场景下，性能往往是最大的瓶颈。
Redux DevTools 提供了一个叫做「Performance」的面板，它可以帮助您追踪以前的状态变化，以及测量性能瓶颈。您可以使用以下步骤来使用 Performance 面板：
在 Redux DevTools 中选择「Performance」面板。
点击「Start Recording」按钮，开始记录应用程序状态变化。
操作应用程序，并在其中进行正常操作，例如搜索、过滤、排序等。
点击「Stop Recording」按钮，停止记录应用程序状态变化。
筛选出您想要分析的状态变化区间，并检查其中的性能瓶颈（例如渲染时间、处理时间、线程阻塞时间等）。
进阶使用
除了上述基本用例之外，Redux DevTools 还有许多其他高级用例。一些特别有用的用例包括：
自定义 Action 监听器
Redux DevTools 可以借助 Action 监听器来更轻松地追踪应用程序中 Action 的执行情况。我们可以通过如下代码来自定义一个 Action 监听器：
const customActionListener = (action) => console.log('Action:', action)
const store = createStore(reducer, devToolsEnhancer({ actionSanitizer: customActionListener }))时间旅行
Redux DevTools 支持时间旅行功能，这意味着您可以在应用程序的执行过程中查看历史状态变化，并在需要的时候撤消特定的操作。您可以通过如下代码来开启时间旅行功能：
const store = createStore(reducer, devToolsEnhancer({ shouldRecordChanges: true }))使用多个 DevTools 实例
最后，您可能需要同时使用多个 Redux DevTools 实例。这可能是因为您正在处理多个不同的应用程序，并且想要在同一个浏览器窗口中查看和调试这些应用程序。Redux DevTools 可以通过如下的代码来启用多个实例：
const instance1 = new DevTools({ name: 'Instance 1', options: {} })
const instance2 = new DevTools({ name: 'Instance 2', options: {} })
app.use('/instance1', instance1.middleware)
app.use('/instance2', instance2.middleware)您可以根据自己的需要在不同的路径中启用多个实例。
结论
Redux DevTools 是一个很强大的调试工具。它可以帮助您更轻松地追踪应用程序状态、调试错误、测量性能，并提供了许多高级用例，例如自定义 Action 监听器、时间旅行、多个实例等。在很多情况下，使用 Redux DevTools 可以极大地提升您的开发体验，让应用程序更加健壮和稳定。希望您可以在今后的应用程序开发中使用 Redux DevTools，并从中受益！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b53d69babaf620faabf72