Redux 是一个流行的状态管理库，用于构建 React 应用程序。Redux DevTools 是一个浏览器扩展程序，可以帮助开发人员调试 Redux 应用程序。本文将介绍如何使用 Redux DevTools 调试 Redux 应用程序。
安装 Redux 和 Redux DevTools
首先，我们需要安装 Redux 和 Redux DevTools。可以使用 npm 或 yarn 安装：
npm install redux redux-devtools-extension
或
yarn add redux redux-devtools-extension
配置 Redux Store
Redux DevTools 可以通过 store enhancer 来集成到 Redux 应用程序中。在创建 store 时，我们需要使用 composeWithDevTools 函数来将 Redux DevTools 与 store enhancer 组合在一起。
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
composeWithDevTools()
);使用 Redux DevTools
安装 Redux DevTools 后，可以在浏览器中打开 Redux DevTools 面板。在 Chrome 中，可以通过右键单击页面并选择“检查”来打开开发者工具。然后，单击“Redux”选项卡以打开 Redux DevTools 面板。
在 Redux DevTools 面板中，可以查看应用程序的状态和操作历史记录。可以使用时间旅行功能来回滚和重做操作，以便更轻松地调试应用程序。
示例
下面是一个简单的 Redux 应用程序，它使用 Redux DevTools 来调试应用程序：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------------- - ---- ---------------------------
-- -- ------ --
----- ----------------- - --------------------
----- ----------------- - --------------------
-- -- ------ ----
-------- ----------- -
------ - ----- ----------------- --
-
-------- ----------- -
------ - ----- ----------------- --
-
-- -- -------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------------
------ ----- - --
---- ------------------
------ ----- - --
--------
------ ------
-
-
-- -- -----
----- ----- - ------------
--------
---------------------
--
-- -- -----
------------------ --
----------------------- -----------------
--
-- -- ------
----------------------------
----------------------------
----------------------------在上面的示例中，我们定义了两个 action 类型和两个 action 创建函数。然后，我们定义了一个 reducer，用于根据 action 类型更新状态。最后，我们创建了一个 store，并使用 composeWithDevTools 函数将 Redux DevTools 与 store enhancer 组合在一起。
在上面的示例中，我们还订阅了 store，以便在状态发生变化时打印状态。最后，我们使用 dispatch 函数分发了三个 action：两个增量和一个减量。在浏览器中打开 Redux DevTools 面板后，可以看到应用程序状态的变化和操作历史记录。
结论
Redux DevTools 是一个非常有用的工具，可以帮助开发人员调试 Redux 应用程序。在本文中，我们介绍了如何配置 Redux Store 和使用 Redux DevTools。我们还提供了一个示例，演示了如何使用 Redux DevTools 调试 Redux 应用程序。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673d3596face55d720578136