前言
在现代 Web 应用程序开发中，状态管理是非常重要的一部分，由于状态的复杂性和变化性，而使得数据流的控制变得非常困难。因此，为了支持复杂的应用程序开发，Redux 库被广泛使用来管理应用程序的状态。但是，Redux 库并不提供可视化工具，这就使得我们很难调试和监视应用程序的状态。
为了解决这个问题，redux-devtools-core 库诞生了，它为 Redux 应用程序提供了可视化的调试工具。在这篇文章中，我们将会学习使用 redux-devtools-core 库来开发 Redux 应用程序。
安装
为了开始使用 redux-devtools-core 库，我们需要在项目中安装它。可以使用 npm 命令来安装它：
npm install --save redux-devtools-core
配置
为了使用 redux-devtools-core 库，我们需要在 Redux store 的配置文件中添加它。以下是一些示例代码：
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-core';
import rootReducer from './reducers';
export default function configureStore() {
const store = createStore(rootReducer, devToolsEnhancer());
return store;
}在上面的代码中，我们使用了 devToolsEnhancer 函数，它被提供了 redux-devtools-core 库。它将增强我们的 Redux store，并添加一个可视化工具。
使用
现在，我们已经安装并配置了 redux-devtools-core 库，接下来，我们将会演示如何使用它来监视 Redux 应用程序的状态。
首先，我们需要使用 Redux 提供的 applyMiddleware 函数将 redux-thunk 中间件添加到我们的 store 中。中间件可以让我们在 Redux store 中使用异步 API。
以下是一些示例代码：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ - ---------------- - ---- ---------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ------ ------- -------- ---------------- - ----- ----- - ------------------------ ------------------------------------------ ------ ------ -
接下来，我们需要安装一些浏览器插件以便查看生成的状态。安装完成后，打开 Chrome 开发者工具，进入 Redux 标签页，就可以看到我们的状态了。
结论
在本文中，我们已经学习了如何使用 redux-devtools-core 库来监视和调试 Redux 应用程序的状态。通过使用这个强大的工具，我们现在可以更好地理解 Redux 应用程序，并更好地调试我们的代码。
通过这个教程，我们也学会了如何安装、配置 redux-devtools-core 库并使用它来监视我们的 Redux 应用程序的状态。在未来的开发中，我们可以使用这个库来更好地开发和维护我们的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72747