Redux 是一个强大的状态管理库，但是当应用规模变大时，调试 Redux 的复杂度会随之增加。Redux-devtools-extension 提供了强大的工具来帮助开发者调试 Redux 应用程序。本文将详细介绍 Redux-devtools-extension，并包含示例代码。
Redux-devtools-extension 是什么？
Redux-devtools-extension 是Redux 官方推荐的 Chrome 浏览器扩展程序，它提供了几个有用的功能：
- 时间旅行（time travel）: 允许开发者回溯应用程序不同时间点的状态
- 实时编码：允许开发者在运行时编辑 Redux reducer
- 实时监控：实时监控应用程序的 Redux 状态
Redux-devtools-extension 提供了一个用于调试 Redux 的强大工具集。开发者可以使用它来查看 Redux 最终状态，同时还可以使用调试工具监视 Redux 中的任何变化。
如何使用 Redux-devtools-extension
要开始使用 Redux-devtools-extension，首先需要安装它。
npm install --save-dev redux-devtools-extension
然后在 create store 函数中 启用它：
import { createStore } from 'redux';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(rootReducer, composeWithDevTools());接下来，当开发者在浏览器上打开应用程序时，Redux-devtools-extension 工具栏会自动添加到其浏览器的开发者工具中。
Redux-devtools-extension 的示例代码
下面是一个使用 Redux-devtools-extension 的简单示例。在这个示例中，我们将创建一个名为 counter 的 Redux 应用程序。
我们需要在项目的 package.json 中添加以下依赖：
"dependencies": {
"redux": "^4.1.1",
"react-redux": "^7.2.5"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.9"
}接着创建 actions：
export const increment = () => {
return { type: 'INCREMENT' };
};
export const decrement = () => {
return { type: 'DECREMENT' };
};创建 reducers：
-- -------------------- ---- -------
----- -------------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
------ ------- ---------------创建 store：
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import counterReducer from './reducers/counterReducer';
const store = createStore(counterReducer, composeWithDevTools());现在可以在组件中使用我们创建的 store，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -------------
----- ------- - -- ------ ---------- --------- -- -- -
------ -
-----
--------------
------- --------------------------------------
------- --------------------------------------
------
--
--
----- --------------- - ------- -- -
------ - ------ ----------- --
--
------ ------- ------------------------ - ---------- --------- ------------现在，当我们打开浏览器，在 Redux-devtools-extension 工具栏中，就可以看到如下所示的一个计数器：
当我们单击 '+' 按钮或 '-' 按钮时，会看到 Redux 状态的更改。还可以使用“时间旅行”功能回溯状态，以检查 Redux 状态在不同时间点的变化。
总结
Redux-devtools-extension 是一个强大的 Redux 调试工具，为开发者调试 Redux 应用程序提供了非常便利的方法。本文详细介绍 Redux-devtools-extension 的使用方法，同时提供了一个简单的示例代码。当我们在开发 Redux 应用程序时，Redux-devtools-extension 应该是我们调试 Redux 的首选工具之一。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/648a778748841e9894899a3b