通过 Redux DevTools 调试 Redux 应用-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个广泛使用的 JavaScript 应用程序状态管理库。在许多大型 React 应用程序中，Redux 可以用于简化状态管理，使其更易于理解和维护。在开发过程中，调试 Redux 应用程序可能很困难，因为 Redux 中的状态转换是通过纯函数完成的，因此很难调试。Redux DevTools 是一个强大的 Chrome 扩展程序，可以大大简化调试 Redux 应用程序的过程。

安装 Redux DevTools

要使用 Redux DevTools，您需要首先将其添加到您的浏览器。打开 Chrome 浏览器并转到 Chrome Web Store，然后搜索 Redux DevTools。单击 “添加到 Chrome” 按钮，然后选择 “添加扩展程序” 确认安装。

集成 Redux DevTools 到应用程序

使用 Redux DevTools 调试 Redux 应用程序的第一步是将其集成到您的应用程序中。您需要使用 Redux DevTools 提供的提供器来修改应用程序的 store：

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  reducer,
  composeWithDevTools()
);

将应用程序的 store 作为参数传递给 Redux DevTools 的 composeWithDevTools 方法。这将在 store 上安装 Redux DevTools 的中间件。

使用 Redux DevTools 调试应用程序

现在您已经将 Redux DevTools 集成到您的应用程序中，您可以使用 Chrome 开发工具中的 Redux DevTools 面板来调试您的应用程序。要打开 Redux DevTools 面板，请打开Chrome 开发工具并切换到“Redux”选项卡：

您可以在 Redux DevTools 面板中看到当前应用程序状态的所有数据。您可以单击各种操作，如切换不同的操作以查看状态的变化，暂停并恢复应用程序，以及查看应用程序的 action 历史记录：

此外，Redux DevTools 还包括一些有用的功能，例如将应用程序状态导出/导入到 JSON 文件中，可以将应用程序状态（action）重播到之前的状态，以及记录 action 的性能。

结论

Redux DevTools 是一个非常强大的工具，可以大大简化调试 Redux 应用程序的过程。通过在应用程序中集成 Redux DevTools 提供商并使用 Chrome 开发工具中的 Redux DevTools 面板，您可以轻松查看应用程序的状态和操作历史记录，以及回放应用程序状态的历史记录和性能分析。如果你正在使用 Redux，那么你应该一定要试试 Redux DevTools，它将成为你调试流程的强大帮手。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/676d3b0482fcee791c65f045