使用Redux Toolkit configureStore集成Redux-Saga遇TS类型错误

我在使用Redux-Saga处理副作用时，因createStore废弃改用Redux Toolkit 2.0.1的configureStore，但两种写法都触发了TypeScript类型错误：

第一种写法及报错 #

代码：

import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./rootReducer";
import logger from 'redux-logger'
import { useDispatch } from 'react-redux'
import { rootSaga } from './rootSaga'

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
    rootReducer,
    middleware: (gDM) => gDM().concat(logger, sagaMiddleware)
  })

sagaMiddleware.run(rootSaga)

export type AppDispatch = typeof store.dispatch
export const useAppDispatch: () => AppDispatch = useDispatch

export default store;

报错：

Type '(gDM: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>, Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<...>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
  Type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>, Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]>' is not assignable to type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
    Type '[ThunkMiddleware<any, UnknownAction, undefined>, Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]' is not assignable to type '[ThunkMiddleware<any, UnknownAction, undefined>]'.
      Source has 3 element(s) but target allows only 1

移除logger后，最后一行变为：Source has 2 element(s) but target allows only 1

第二种写法及报错 #

代码：

import { configureStore, Tuple } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./rootReducer";
import logger from 'redux-logger'
import { useDispatch } from 'react-redux'
import { rootSaga } from './rootSaga'

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
    rootReducer,
    middleware: () => new Tuple(logger, sagaMiddleware)
  })

sagaMiddleware.run(rootSaga)

export type AppDispatch = typeof store.dispatch
export const useAppDispatch: () => AppDispatch = useDispatch

export default store;

报错：

Type '() => Tuple<[Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
  Type 'Tuple<[Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]>' is not assignable to type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
    Type '[Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]' is not assignable to type '[ThunkMiddleware<any, UnknownAction, undefined>]'.
      Source has 2 element(s) but target allows only 1.

移除logger后报错：

Type '() => Tuple<[SagaMiddleware<object>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
  Type 'Tuple<[SagaMiddleware<object>]>' is not assignable to type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
    Type '[SagaMiddleware<object>]' is not assignable to type '[ThunkMiddleware<any, UnknownAction, undefined>]'.
      Type 'SagaMiddleware<object>' is not assignable to type 'ThunkMiddleware<any, UnknownAction, undefined>'.
        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'

错误原因 #

Redux Toolkit 2.x对中间件的类型推断逻辑更严格：

• 默认中间件（如Thunk）是Tuple类型，直接concat非Tuple的中间件会导致类型不匹配
• Redux-Saga的中间件需要明确RootState类型，否则会触发泛型不兼容问题
• 第二种写法直接替换默认中间件，但未包含Thunk，且Saga中间件类型未正确适配

解决方法 #

以下是正确的类型安全写法：

import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./rootReducer";
import logger from 'redux-logger';
import { useDispatch } from 'react-redux';
import { rootSaga } from './rootSaga';

// 导出RootState类型，用于saga中间件的类型推断
export type RootState = ReturnType<typeof rootReducer>;

// 创建saga中间件时指定RootState类型
const sagaMiddleware = createSagaMiddleware<RootState>();

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      // 保留默认thunk，如需禁用可设为false
      thunk: true,
    }).concat(sagaMiddleware, logger),
});

sagaMiddleware.run(rootSaga);

// 导出增强后的dispatch类型
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

export default store;

关键要点： #

• 显式导出RootState并传递给createSagaMiddleware，解决泛型不兼容问题
• 使用getDefaultMiddleware()获取默认中间件后，用concat添加自定义中间件，RTK会自动处理Tuple类型的合并
• 正确定义useAppDispatch，直接指定泛型比类型断言更安全

如果需要完全替换默认中间件（不推荐，除非明确不需要Thunk），可以用Tuple包裹所有中间件，确保包含Thunk：

import { configureStore, Tuple, thunk } from "@reduxjs/toolkit";
// ...其他导入

const store = configureStore({
  reducer: rootReducer,
  middleware: () => new Tuple(thunk, sagaMiddleware, logger),
});

这样就能解决所有类型错误，同时保证代码的类型安全。

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