Redux Toolkit中正确组合中间件的方法

在使用Redux Toolkit时，开发者经常会遇到需要自定义中间件组合的情况。本文将详细介绍如何正确地在Redux Toolkit中组合默认中间件和自定义中间件。

问题背景

在Redux Toolkit 2.1.0版本中，当尝试使用Tuple包装getDefaultMiddleware()返回的结果时，会出现类型错误。这是因为getDefaultMiddleware()本身已经返回了一个Tuple实例，而直接将其放入另一个Tuple会导致嵌套结构，这在Redux中间件系统中是不被允许的。

错误示例分析

以下代码展示了常见的错误用法：

import { configureStore, Tuple } from "@reduxjs/toolkit";

configureStore({
  reducer: () => null,
  middleware: (getDefaultMiddleware) => new Tuple(getDefaultMiddleware()),
});

这种写法会产生类型错误，因为它在Tuple中嵌套了另一个Tuple。

正确解决方案

Redux Toolkit为getDefaultMiddleware()返回的Tuple实例提供了两个实用方法：

1. prepend() - 在默认中间件之前添加自定义中间件
2. concat() - 在默认中间件之后添加自定义中间件

基本用法

import { configureStore } from "@reduxjs/toolkit";
import { customMiddleware1, customMiddleware2 } from "./middlewares";

configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware()
      .prepend(customMiddleware1)  // 添加在默认中间件之前
      .concat(customMiddleware2)   // 添加在默认中间件之后
});

实际应用场景

假设我们需要在Redux store中添加日志中间件和API调用中间件，同时保留Redux Toolkit的默认中间件（如thunk）：

import { configureStore } from "@reduxjs/toolkit";
import logger from "redux-logger";
import apiMiddleware from "./apiMiddleware";

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .concat(logger)        // 添加日志中间件在默认中间件之后
      .prepend(apiMiddleware) // 添加API中间件在默认中间件之前
});

为什么不能直接使用Tuple包装

Redux中间件需要按照特定的顺序执行，形成一个中间件链。直接使用Tuple包装会破坏这个链式结构，导致中间件无法正确执行。Redux Toolkit提供的prepend和concat方法确保了中间件能够以正确的顺序组合和执行。

总结

在Redux Toolkit中组合中间件时，应该避免直接使用Tuple包装getDefaultMiddleware()的结果，而是使用其提供的prepend和concat方法来添加自定义中间件。这种方法不仅解决了类型问题，还能确保中间件以正确的顺序执行，是Redux Toolkit推荐的最佳实践。