带有中间件的 Redux DevTools

Redux DevTools 是一个免费的开源工具，它可以帮助我们调试 Redux 应用程序。它可以帮助我们捕获、记录和回放 Redux 应用程序的动作，以便我们了解 Redux 应用程序中发生的事情，从而更好地调试和优化应用程序。

除了原始的 Redux DevTools 功能外，我们还可以通过添加中间件来增强其功能。这些中间件可以帮助我们更好地查看和理解 Redux 应用程序的状态和动作。在本文中，我们将介绍如何使用带有中间件的 Redux DevTools。

安装

要使用带有中间件的 Redux DevTools，我们需要先安装它。我们可以使用 npm 命令来完成安装：

npm install --save-dev redux-devtools-extension

在应用程序中集成 Redux DevTools

在应用程序中集成 Redux DevTools 的第一步是在我们的 Redux store 中启用它。我们可以使用 composeWithDevTools 函数来创建一个增强版的 store 对象，这个对象包含了我们添加的中间件：

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const middleware = [];

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middleware)
  )
);

export default store;

在上面的代码中，我们首先导入 composeWithDevTools 函数和我们的根 reducer。然后，我们创建一个空的中间件数组，这个数组可以用于添加我们的中间件。最后，我们使用 composeWithDevTools 函数来创建一个增强版的 store 对象。

添加中间件

在我们的应用程序中添加中间件非常简单。我们可以将任何中间件添加到 middleware 数组中，然后它就会被自动包含到我们的增强版 store 对象中。

例如，如果我们想要在 Redux DevTools 中记录每个动作的状态，我们可以使用 redux-logger 中间件：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';
import logger from 'redux-logger';

const middleware = [logger];

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middleware)
  )
);

export default store;

在上面的代码中，我们导入 redux-logger 中间件，并将它添加到我们的中间件数组中。然后，我们通过使用 applyMiddleware 函数把这些中间件和我们的根 reducer 组合起来，创建了一个增强版的 store 对象。

结论

带有中间件的 Redux DevTools 可以让我们更好地理解和调试我们的 Redux 应用程序，可以帮助我们记录、重放和调试所有的 Redux 动作。在本文中，我们介绍了如何使用 composeWithDevTools 函数和 applyMiddleware 函数来在应用程序中集成中间件，并演示了如何使用 redux-logger 中间件来记录 Redux 动作。