Redux 是一款流行的 JavaScript 应用状态管理库，它可以帮助开发者更好地管理应用的状态。Redux DevTools 是一个强大的调试工具，它可以帮助开发者更好地调试和理解 Redux 应用状态的变化。在本文中，我们将介绍 Redux DevTools 的基本使用方法和实践。
安装 Redux DevTools
首先，我们需要安装 Redux DevTools。Redux DevTools 提供了多种安装方式，包括浏览器插件、React 组件等。在本文中，我们将介绍使用浏览器插件的方式。
我们可以在 Chrome Web Store 中搜索 Redux DevTools，找到 Redux DevTools 扩展程序并安装。安装完成后，我们需要在应用中启用 Redux DevTools。
启用 Redux DevTools
在应用中启用 Redux DevTools 非常简单。我们只需要在创建 Redux store 时，将 Redux DevTools 作为中间件传递给 createStore 方法即可。
------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------------- --
这里我们使用了 Redux DevTools 提供的 composeWithDevTools 方法，它可以将 Redux DevTools 与 applyMiddleware 方法进行组合。这样，我们就可以在应用中使用 Redux DevTools 了。
使用 Redux DevTools
启用 Redux DevTools 后，我们可以在浏览器中打开 Redux DevTools 面板，查看应用状态的变化。在开发环境下，我们可以使用快捷键 Ctrl + H 或者 F3 来打开 Redux DevTools 面板。
在 Redux DevTools 面板中，我们可以查看应用状态的变化，包括 action 的触发、state 的变化等。此外，Redux DevTools 还提供了多种功能，如时间旅行、状态比较、持久化等。
时间旅行
时间旅行是 Redux DevTools 的核心功能之一。它可以让我们回溯应用状态的历史记录，查看应用状态在不同时间点的变化。
在 Redux DevTools 面板中，我们可以使用左侧的时间轴来选择不同的状态记录。当我们选择一个状态记录后，应用状态会自动回溯到该时间点，并更新应用界面。
状态比较
Redux DevTools 还提供了状态比较的功能，它可以让我们比较不同时间点的应用状态之间的差异。
在 Redux DevTools 面板中，我们可以选择两个状态记录，并使用 compare 按钮来比较它们之间的差异。比较结果会以表格的形式呈现，其中包括新增、修改和删除的状态属性。
持久化
Redux DevTools 还支持将应用状态持久化到本地存储中，以便在刷新页面或者关闭浏览器后仍然可以恢复应用状态。
在 Redux DevTools 面板中，我们可以使用右上角的 Persist 按钮来启用状态持久化功能。启用后，Redux DevTools 会将应用状态自动保存到本地存储中。
实践
在实践中，我们可以使用 Redux DevTools 来调试和理解 Redux 应用状态的变化。下面是一个简单的 Redux 应用示例，我们将使用 Redux DevTools 来调试它。
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---在上面的示例中，我们创建了一个简单的 Redux 应用，它包括一个计数器状态和两个 action：INCREMENT 和 DECREMENT。我们使用 store.dispatch 方法分别触发了三次 action，分别是两次 INCREMENT 和一次 DECREMENT。
在浏览器中打开应用，并打开 Redux DevTools 面板，我们可以看到应用状态的变化，如图所示：
在 Redux DevTools 面板中，我们可以看到应用状态在不同时间点的变化，以及 action 的触发记录。此外，我们还可以使用时间旅行功能来回溯应用状态的历史记录，查看应用状态在不同时间点的变化。
总结
Redux DevTools 是一个非常强大的调试工具，它可以帮助开发者更好地调试和理解 Redux 应用状态的变化。在实践中，我们可以使用 Redux DevTools 来调试 Redux 应用，查看应用状态的变化，以及使用时间旅行、状态比较、持久化等功能来更好地理解应用状态的变化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6634a18fd3423812e4222f7e