如何使用 Redux Toolkit 创建多重中间件？

使用 Redux Toolkit 创建多重中间件

简介

Redux Toolkit 是一个受欢迎的工具包，它简化了 Redux 状态管理库的使用。在某些情况下，你可能需要在 Redux 应用程序中使用多个中间件。然而，将它们导出到一个文件中并合并到主存储配置中可能会带来挑战。

问题

当我们尝试将多个中间件合并到一个文件中时，我们遇到了一个问题。 toastMiddleware 意外地重复运行。

解决方案

为了解决这个问题，我们使用了函数式组合模式。该模式将多个函数组合成一个单一的函数，并允许我们在文件中导出它。

以下是执行此操作的步骤：

1. 创建一个 middleware.js 文件，其中包含以下代码：

import { createMiddleware } from "@reduxjs/toolkit";

const middleware = (api) => (next) => (action) => [
  apiErrorMiddleware(api)(next)(action),
  toastMiddleware(api)(next)(action),
];

export default createMiddleware(middleware);

2. 在 store.js 文件中，将导出的 middleware 函数导入并添加到存储配置中：

import middleware from './middleware/apiMiddleware';

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
    errorSlice: errorSlice,
    toastSlice: toastSlice,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }).concat([api.middleware, middleware])
});

优点

这种方法为我们提供了以下优点：

• 将多个中间件组合成一个函数，便于导出和合并。
• 确保中间件以正确的顺序执行。
• 解决 toastMiddleware 重复运行的问题。

技术要点

• createMiddleware：Redux Toolkit 提供的用于创建中间件的函数。
• api：一个上下文对象，它允许访问存储和分派函数。

常见问题

• 为什么要使用函数式组合模式？
  函数式组合模式允许我们以结构化且可读的方式组合多个函数。它还可以帮助确保中间件以正确的顺序执行。

• 如何避免 middleware 重复运行？
  使用函数式组合模式将多个中间件组合成一个函数，可以防止重复运行。

• 我是否可以在 store 配置中直接导入中间件函数？
  否，你必须使用 createMiddleware 函数来创建一个中间件实例，然后将其导出。

• 为什么需要使用 concat 方法来添加中间件？
  concat 方法用于将我们的中间件附加到默认中间件之后。

• 如何访问存储和分派函数？
  存储和分派函数可以通过传递给中间件的 api 上下文对象进行访问。

结论

使用函数式组合模式创建多重中间件是一种有效的方法，可以简化 Redux Toolkit 应用程序的开发。它可以帮助你避免重复运行问题并确保中间件以正确的顺序执行。

免责声明

本文仅为教育目的编写。其中表达的观点不一定是作者或任何其他个人的观点。