Redux 是一个流行的管理状态的库，用于构建可预测的、可维护的 Web 应用程序。Redux DevTools 是一个强大的工具，可以帮助开发者在开发过程中调试 Redux 应用程序。本文将为你介绍 Redux DevTools 的基础知识、使用方法以及进一步学习的资源。
什么是 Redux DevTools？
Redux DevTools 是一个浏览器扩展，支持 Chrome、Firefox 和 Electron。Redux DevTools 可以帮助开发人员：
- 按照时间旅行方式查看应用程序状态的历史记录。
- 轻松检查每个动作的变化、执行时间和执行结果。
- 查看当前状态对应的 Redux 存储数据结构。
Redux DevTools 的使用方法很简单。你可以在安装 Redux 库之后，在你的代码中添加 Redux DevTools 程序，这样，你就可以通过浏览器控制台或使用 Redux DevTools 扩展程序在浏览器中调试 Redux 应用程序。
基础使用方法
在 Redux 应用程序中使用 Redux DevTools 的第一步是通过 npm 安装 Redux DevTools 包：
npm install redux-devtools-extension --save-dev
在应用程序中添加 Redux DevTools：
import { createStore } from 'redux'
import rootReducer from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(
rootReducer,
composeWithDevTools()
)我们在这里通过导入 composeWithDevTools 函数来启用 Redux DevTools 扩展，然后将其添加到 createStore 函数中。
Redux DevTools 扩展在 Redux 应用程序中的工作方式与其他 React 组件相同。开发者可以在应用程序中使用 Provider 组件将 Redux DevTools 注入到应用程序中。
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ --- ---- -------
------ ----- ---- ---------
----------------
--------- --------------
---- --
------------
-------------------------------
-现在，开发者可以按照以下步骤检查 Redux DevTools 扩展是否已正确配置：
- 打开你的应用程序页面。
- 打开 Chrome/Firefox 控制台。
- 点击 Redux DevTools 扩展。
- 然后，你可以按照以下方式测试应用程序状态：
调试你的 Redux 代码
现在，我们已经知道 Redux DevTools 的基础知识和使用方法。下面，我们将介绍如何使用 Redux DevTools 来调试 Redux 应用程序。在这里，我们将使用一个简单的示例来说明。
我们将创建一个简单的 Redux 应用程序，它具有增加和减少计数器的功能。我们将跟踪该应用程序中状态的变化，并在 Redux DevTools 中显示它。
- 创建一个 Actions 类型文件来管理 Action
// src/actions/types.js export const INCREMENT = 'INCREMENT' export const DECREMENT = 'DECREMENT'
- 创建一个 Actions 文件来定义 Action Creator
-- -------------------- ---- ------- -- -------------------- ------ - ---------- --------- - ---- --------- ------ ----- --------- - -- -- -- ----- ---------- -- ------ ----- --------- - -- -- -- ----- ---------- --
- 创建一个 Reducer 文件来管理状态
-- -------------------- ---- -------
-- ---------------------
------ - ---------- --------- - ---- ------------------
----- ------------ - - ------ - -
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ -
------ ----------- - --
-
---- ----------
------ -
------ ----------- - --
-
--------
------ -----
-
-
------ ------- -------- 创建一个 Store 文件来管理全局状态
// src/store.js
import { createStore } from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
export default store- 创建一个功能组件，实现计数器
-- -------------------- ---- -------
-- -------------------------
------ ----- ---- -------
------ - ------------ ----------- - ---- -------------
------ - ---------- --------- - ---- ------------
----- ------- - -- -- -
----- ----- - ------------------- -- ------------
----- -------- - -------------
------ -
-----
---------- ------------
------- ----------- -- ---------------------------------
------- ----------- -- ---------------------------------
------
-
-
------ ------- -------- 创建一个应用程序文件，将组件渲染在一个 React 容器中
-- -------------------- ---- -------
-- ----------
------ ----- ---- -------
------ ------- ---- ----------------------
----- --- - -- -- -
------ -
---- ----------------
-------- --
------
-
-
------ ------- ---在这里，我们已经创建了一个简单的 Redux 应用程序，用于计算器示例。现在，我们将使用 Redux DevTools 来跟踪该应用程序中状态的变化。
打开你的应用程序页面。
打开 Chrome/Firefox 控制台。
点击 Redux DevTools 扩展。
然后，你可以按照以下方式测试应用程序状态：
- 点击“起始状态”，查看应用程序的初始状态。
- 点击“+”按钮，计数器将增加 1。
- 点击“-”按钮，计数器将减少 1。
- 点击“重播”按钮，可以按照时间旅行方式查看应用程序状态的历史记录。
以上是如何通过 Redux DevTools 调试你的 Redux 代码的基础知识和使用方法。当你使用 Redux 开发更复杂的应用程序时，Redux DevTools 将会成为你的好帮手。如果你希望深入学习 Redux DevTools，请访问其官方文档或尝试扩展其功能。
结论
Redux DevTools 是一个强大的工具，可以帮助开发者在开发过程中调试 Redux 应用程序。我们希望本文可以帮助读者了解 Redux DevTools 的基础知识和使用方法。如果你想深入了解 Redux（包括 React Redux 和 Redux Saga 等），我们建议你查看 Redux 官方文档，或阅读其他相关技术文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752a5748bd460d3ad96d8df