Redux DevTools 是一个用于调试 Redux 应用程序的工具。它提供了一个可视化界面，可以帮助开发人员更好地理解应用程序中的状态变化。在 React-Redux 中，我们可以轻松地使用 Redux DevTools 来调试我们的应用程序。
安装 Redux DevTools
Redux DevTools 可以通过 npm 安装。可以使用以下命令进行安装：
npm install redux-devtools-extension
配置 Redux DevTools
在使用 Redux DevTools 之前，我们需要在应用程序中配置 Redux DevTools。我们可以使用 composeWithDevTools 函数来配置 Redux DevTools。以下是一个示例配置：
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
composeWithDevTools()
);在上面的示例中，我们使用 composeWithDevTools 函数将 Redux DevTools 集成到我们的应用程序中。这将允许我们在浏览器中使用 Redux DevTools。
使用 Redux DevTools
一旦我们在应用程序中配置了 Redux DevTools，我们就可以在浏览器中使用它了。在浏览器中打开 Redux DevTools，你将看到一个可视化界面，其中包含应用程序的状态和操作历史记录。
在使用 Redux DevTools 进行调试时，我们可以执行以下操作：
跟踪状态更改
Redux DevTools 将应用程序的状态显示为树形结构，我们可以查看状态的更改历史记录。我们可以通过单击状态树中的节点来查看该节点的历史记录。
调试操作
Redux DevTools 还可以记录应用程序中的操作，我们可以查看操作历史记录以了解应用程序的操作流程。我们可以通过单击操作历史记录中的条目来查看操作的详细信息。
调试时间旅行
Redux DevTools 还可以让我们在应用程序的不同状态之间进行时间旅行。我们可以使用 Redux DevTools 中的“时间旅行”功能来查看应用程序在不同时间点的状态。
示例代码
以下是一个使用 Redux DevTools 的 React-Redux 应用程序示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ ----------- ---- -------------
------ ------- ---- ------------
----- ----- - ------------
------------
---------------------
--
-------- ----- -
------ -
--------- --------------
-------- --
-----------
--
-
------ ------- ----在上面的示例中，我们将 Redux DevTools 集成到我们的应用程序中，并将应用程序的状态传递给 Counter 组件。在 Counter 组件中，我们可以使用 useSelector 和 useDispatch 钩子来访问和更改应用程序的状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- --------- - ---- ------------
-------- --------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
------ -
-----
---------- ------------
------- ----------- -- ---------------------------------
------- ----------- -- ---------------------------------
------
--
-
------ ------- --------在上面的示例中，我们使用 useSelector 钩子来获取应用程序的状态，并使用 useDispatch 钩子来调度 increment 和 decrement 操作。我们可以使用 Redux DevTools 来查看应用程序的状态和操作历史记录，以便更好地了解应用程序的状态变化。
总结
在 React-Redux 中使用 Redux DevTools 可以帮助我们更好地了解应用程序的状态和操作历史记录。我们可以使用 composeWithDevTools 函数将 Redux DevTools 集成到我们的应用程序中，并使用可视化界面来调试应用程序。我们可以跟踪状态更改、调试操作和进行时间旅行来了解应用程序的状态变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65534decd2f5e1655dd0b82a