Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助我们轻松地管理应用的状态，使应用的数据流变得更加简单和可控。Redux Devtools 是一个调试 Redux 应用的强大工具。在开发过程中，使用 Redux Devtools 可以大大提高开发效率、增强调试功能和排错能力。
安装和使用
Redux Devtools 是一个插件形式的工具，需要安装和配置才能使用。下面是使用 Redux Devtools 的步骤：
安装 Redux Devtools 插件
要使用 Redux Devtools，首先需要在浏览器中安装 Redux Devtools 插件，这个插件可以在 Chrome 的 Web Store 中搜索到，并且可以在 Firefox 和 Safari 上使用。
在应用程序中配置 Redux Devtools
在应用程序中启用 Redux Devtools 非常容易，只需要在 createStore 函数中添加下面的代码：
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';
const store = createStore(rootReducer, composeWithDevTools());通过使用 composeWithDevTools 函数，Redux Devtools 被集成到应用程序的 store 中。
查看应用状态和操作历史
通过默认配置，可以在 Redux Devtools 中查看整个应用程序的状态和操作历史记录。通过点击 Redux Devtools 窗口中的“state”和“action”选项卡，可以快速查看应用程序中所有状态的当前值和操作历史。当然，您也可以通过搜索和过滤器查找特定的状态值和操作。
调试 Redux 应用
Redux Devtools 还可以帮助我们调试应用程序中的操作。如果出现任何错误，我们可以快速检查错误发生的位置和值。在 Redux Devtools 窗口中，可以单击操作历史的条目来调试操作，并在“action”选项卡中查看具体的操作内容和处理结果。
示例
下面是一个基本的应用程序，它使用 Redux 和 Redux Devtools 来管理状态。这个应用程序有两个组件：一个计数器组件和一个控制面板组件。用户可以通过控制面板中的按钮来增加或减少计数器的值。这个应用程序还记录了用户所有的操作历史记录。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ - --------- ------- - ---- --------------
-- -------
----- --------- - -- -- -- ----- ----------- ---
----- --------- - -- -- -- ----- ----------- ---
-- --------
----- -------------- - ------ - - ------ -- -------- -- -- ------- -- -
------ ------------- -
---- ------------ -
----- -------- - -
------ ----------- - --
-------- ------------------ -------------
--
------ ---------
-
---- ------------ -
----- -------- - -
------ ----------- - --
-------- ------------------ -------------
--
------ ---------
-
-------- -
------ ------
-
-
--
-- ----------
----- ------- - -- ----- -- -- -
------ -----------------
--
----- ------------ - -- ---------- --------- -- -- -
------ -
-----
------- --------------------------------------
------- --------------------------------------
------
--
--
-- ----- -----
----- ----- - --------------------------- -----------------------
-- ------- ---------- -- -----
----- ---------------- - ------------- -- -- ------ ----------- -------------
----- --------------------- - ------------- - ---------- --------- ---
------------
--
-- ------ -----------
----------------
--------- --------------
----------------- --
---------------------- --
------------
-------------------------------
--这个应用程序非常简单，但却展示了 Redux 和 Redux Devtools 的强大之处。在应用程序中添加了 composeWithDevTools 函数，我们就可以利用 Redux Devtools 来监视应用程序的状态，并简单地实现了一个计数器和一个控制面板。
总结
通过使用 Redux Devtools，我们可以更轻松地调试 Redux 应用程序。它允许我们轻松地浏览应用程序的状态和操作历史，并帮助我们更快地发现和解决错误和问题。在开发前端应用程序时，使用 Redux Devtools 非常有用，可以简化开发流程，并帮助我们更快地构建更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66553519d3423812e49b59eb