升级Redux-Toolkit至2.0.1后configureStore中间件类型错误排查

问题背景 #

升级Redux-Toolkit至2.0.1版本后，configureStore的中间件配置出现TypeScript类型不兼容错误，核心冲突为默认ThunkMiddleware类型与自定义中间件类型不匹配。

相关代码 #

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat([
      createStateSyncMiddleware({
        channel: "ketchcloth",
        broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
        blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
      })
    ])
})

错误信息 #

TS2322: Type '(getDefaultMiddleware: GetDefaultMiddleware) => Tuple<[ThunkMiddleware<any, UnknownAction>, ...Middleware<{}, any, Dispatch>[]]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware) => Tuple'.
Type 'Tuple<[ThunkMiddleware<any, UnknownAction>, ...Middleware<{}, any, Dispatch>[]]>' is not assignable to type 'Tuple'.
Type '[ThunkMiddleware<any, UnknownAction>, ...Middleware<{}, any, Dispatch>[]]' is not assignable to type 'Middlewares'.
Type 'ThunkMiddleware<any, UnknownAction> | Middleware<{}, any, Dispatch>' is not assignable to type 'Middleware<{}, any, Dispatch>'.
Type 'ThunkMiddleware<any, UnknownAction>' is not assignable to type 'Middleware<{}, any, Dispatch>'.
Types of parameters 'next' and 'next' are incompatible.
Type 'unknown' is not assignable to type 'T'.
'T' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.

解决方案 #

1. 显式绑定RootState类型 #

先明确RootState类型，给getDefaultMiddleware指定类型参数，并断言自定义中间件类型匹配：

import { configureStore, Middleware } from '@reduxjs/toolkit';
import { createStateSyncMiddleware } from 'redux-state-sync';

// 定义RootState类型
export type RootState = ReturnType<typeof rootReducer>;
// 定义AppStore类型
export type AppStore = ReturnType<typeof configureStore>;

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    // 给默认中间件绑定RootState类型
    getDefaultMiddleware<RootState>({
      serializableCheck: false,
      immutableCheck: false
    }).concat(
      // 断言自定义中间件符合RootState对应的Middleware类型
      createStateSyncMiddleware({
        channel: "ketchcloth",
        broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
        blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
      }) as Middleware<{}, RootState>
    )
});

export type AppDispatch = typeof store.dispatch;

2. 使用MiddlewareArray统一管理 #

Redux-Toolkit 2.x提供的MiddlewareArray可自动处理中间件类型合并，无需手动断言：

import { configureStore, MiddlewareArray } from '@reduxjs/toolkit';
import { createStateSyncMiddleware } from 'redux-state-sync';

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    new MiddlewareArray().concat(
      getDefaultMiddleware({
        serializableCheck: false,
        immutableCheck: false
      }),
      createStateSyncMiddleware({
        channel: "ketchcloth",
        broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
        blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
      })
    )
});

// 自动推导类型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export type AppStore = typeof store;

核心原因 #

Redux-Toolkit 2.x强化了中间件类型约束，默认ThunkMiddleware需要与业务的RootState类型绑定。原代码中默认中间件返回的Thunk使用any类型，导致与自定义中间件类型冲突。显式指定类型或使用MiddlewareArray可让TypeScript正确推断所有中间件类型，解决不兼容问题。

内容的提问来源于stack exchange，提问作者abhishek antala