前端开发中，Redux 是一个非常流行的状态管理库。但是当我们在复杂的应用中使用 Redux 的时候，调试可能会变得比较麻烦。为了解决这个问题，Redux 提供了 Redux DevTools。本文将详细介绍 Redux DevTools，并提供相关学习和指导意义。
什么是 Redux DevTools？
Redux DevTools 是一个可以让你实时编辑、排查和调试 Redux 应用程序的 浏览器扩展。它包括三个部分：
- Chrome 浏览器扩展
- 内嵌到你的应用程序中（只在开发环境中启用）
- 一个独立的 Electron 应用程序（Redux DevTools Dock）
通过使用 Redux DevTools，你可以：
- 检查应用程序状态的变化
- 追溯状态的历史记录
- 非常快速地重放状态
- 当状态更改时，监视可以显示所有事件，例如触发 action 和分发 reducer
如何使用 Redux DevTools？
首先，你需要安装 Redux DevTools 扩展程序。
在浏览器中安装扩展程序：
- 打开 Chrome 应用商店。
- 搜索 Redux DevTools，并安装。
- 安装完成后，在开发模式下启动 Chrome 浏览器。
在项目中启用 Redux DevTools：
- npm 安装 redux-devtools-extension。
- 在 store.js 中引入 createStore 和 applyMiddleware函数，然后将 createStor 函数替换为 Redux Toolkit 中的 configureStore 函数，再通过调用window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION() 将 Redux DevTools 添加到应用程序中。
------ - -------------- - ---- ------------------ ------ - ----------- - ---- ------------ ------ --------------- ---- ------------- ------ ----- ----- - ---------------- -------- ------------ ----------- ------------------ --------- ----------------------------------- -- ------------------------------------- --
最后，启动应用程序并打开 Chrome DevTools，即可开始使用。
Redux DevTools 常用操作
Time Travel (时光旅行)
Time Travel 是 DevTools 中的一个最常用功能。它使你能够回顾应用程序状态的历史记录，从而让你了解每个状态都发生了什么。
Dispatch（分发）
Dispatch 是 Redux 中的一个概念，它表示将 action 插入到 Redux 应用程序状态的过程。这就是 Redux DevTools 中 Dispatch 常用于查看 action。
Diff（差异）
差异显示了当前 state 怎样和上一个 state 发生了变化。
Redux DevTools 和 React Hooks
从 React Hooks 的版本 16.8.0 开始，我们可以像下面这样在我们的功能组件中使用 Redux：
------ ----- ---- -------
------ - ------------ ----------- - ---- -------------
------ - ---------- --------- - ---- -----------
-------- ------- -- -
----- ----- - ----------------- -- ------------
----- -------- - -------------
------ -
-----
------- ----------- -- ---------------------------------
----------------
------- ----------- -- ---------------------------------
------
-
-
------ ------- -------好处是：
- 只要当 state 发生变化时重新渲染组件；
- 省去了 mapStateToProps 和 mapDispatchToProps；
- React Hooks 控制的程度更精确。
但随之，Redux DevTools 就不能准确地捕捉到数据变化并显示。
因此，我们需要在 useStore 这个 hook 中，手动调用 window.REDUX_DEVTOOLS_EXTENSION.而不是在 createStore 阶段。
------ - -------- - ---- -------------
------ - --------- - ---- -------
-------- ---------------- -- -
----- ----- - ----------
------------ -- -
-- --------------------- --- ------------ -- ------------------------------------ -
---------------------------------------------
------------------------------------------------ -- -
----- ----- - ----------------
------------------------------------------ ----- --
--
-
-- --------
-结论
在 Redux DevTools 中，我们可以轻松地回溯状态的历史记录，调试和检查我们的应用程序状态，还可以保存现场。通过对 Redux DevTools 的使用，我们可以更方便地进行前端开发和调试，并加深我们对 Redux 的理解。
可以到官网查看更多配置信息和操作步骤。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672a020addd3a70eb6ceee3f