在前面的两篇 Redux 实践文章中，我们了解了 Redux 的核心概念和基本使用方法，并且结合实际案例进行了详细的讲解。本篇文章将带领大家使用 Redux-devtools 工具优化生产环境的调试体验，提升开发效率。
Redux-devtools 是什么
Redux-devtools 是一个 Redux 开发调试工具集合，它包括了多个工具和插件，帮助开发者在开发过程中更加轻松地调试 Redux 应用程序。
Redux-devtools 的主要功能包括：
- 实时地查看应用程序状态的变化.
- 操作应用程序状态，为我们提供了一组操作状态的接口，比如撤销、重做、时间旅行等.
- 查看每个动作对应的状态变更流程，包括每个动作所带来的状态改变以及相应的时间信息等.
- 显示每个组件的 props 和状态.
- 可以让我们轻松地导出应用状态的快照.
下面，我们会结合代码来演示如何使用 Redux-devtools 进行调试，我们会用到 redux-devtools-extension 这个 Chrome 插件。
使用 Redux-devtools
首先，需要在项目中安装 redux-devtools-extension 这个插件，并在代码中配置。
安装插件：
npm install --save redux-devtools-extension
配置插件：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ----------- ---- ------------- -- ------------ -- -- ----- ----- ----- ----- - ------------ ------------ -- ------ ----- -------- ----------------------------------- -- ------------------------------------- --
代码中我们创建了一个 Redux Store，并通过 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 的方式，将 Redux-devtools 集成到项目中。这样就可以在 Chrome 浏览器的开发者工具中使用 Redux-devtools 了。
接下来，我们会使用一个示例应用程序 Counter 来演示 Redux-devtools 的使用。
-- -------------------- ---- -------
-- ------ -----
----- --------- - --------------------
----- --------- - --------------------
-- ------ --------
------ -------- ----------- -
------ - ----- --------- --
-
------ -------- ----------- -
------ - ----- --------- --
-
-- -------
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ----------
------ - --------- ------ ----------- - - --
---- ----------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-代码中，我们创建了一个简单的计数器应用程序。它提供了两个操作：increment 和 decrement。操作的结果是改变计数器的值。
要使用 Redux-devtools 调试该应用程序，需要使用 Redux-Devtools 的 instrument 函数将 createStore 函数进行封装：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ----------- ---- -------------
-- ------------
-- -- ----- --------
----- ----- - ------------
------------
----------------------------------- -- -------------------------------------
------ -----
----------- ---
--
--在这个例子中，我们通过使用 trace 和 traceLimit 参数来配置 Redux-devtools 的 instrument 函数。trace 参数会跟踪应用程序的状态变化，traceLimit 参数是存储跟踪信息的最大条数。
现在，我们可以在 Chrome Devtools 的 Redux-devtools 面板里看到应用程序状态的变化，而且还可以查看状态的操作历史。我们还可以利用 Devtools 面板的 “Dispatch” 功能来手动更改应用程序状态。
Redux-devtools 不仅能够查看应用程序的状态，还提供了一系列强大的工具，比如“时间旅行”，可以前进或后退到某个指定的时间点。这个工具在调试复杂的应用程序状态时非常有帮助。
总结
Redux-devtools 是一个非常有用的 Redux 的调试工具集合。在本文中，我们介绍了 Redux-devtools 的主要功能，并演示了如何在项目中使用这个工具集。
如果你还不了解 Redux-devtools 的使用，建议尝试一下它，这会提高你的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cddc7db5eee0b5255cd972