React创建Store时遇TS报错：composeWithDevTools参数数量不符

1. configureStore 参数格式错误
   Redux Toolkit 的 configureStore 仅接受单个配置对象作为参数，你当前把 reducer 和 enhancer 拆成两个独立参数传入，这是旧版 Redux createStore 的写法，不符合 RTK 的 API 规范。

2. composeWithDevTools 误用
   RTK 的 configureStore 已经默认集成了 Redux DevTools 支持，无需手动引入 redux-devtools-extension 的 composeWithDevTools。同时你当前调用 composeWithDevTools 的方式也不符合其类型定义，直接触发了 TypeScript 参数数量报错。

步骤1：调整 configureStore 配置逻辑 #

改用 RTK 标准的配置对象格式，将 reducer、中间件等配置统一放入对象中。通过 getDefaultMiddleware 方法添加 saga 中间件（这种方式不会覆盖 RTK 默认提供的 thunk、数据校验等中间件）。

修正后的完整代码 #

import { configureStore } from '@reduxjs/toolkit';
import reducer from './modules/reducer';
import createSagaMiddleware from '@redux-saga/core';
import rootSaga from './modules/rootSaga';

const create = () => {
  const sagaMiddleware = createSagaMiddleware();
  
  const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware)
  });

  sagaMiddleware.run(rootSaga);
  return store;
};

export default create;

步骤2：可选优化 #

由于 RTK 已内置 DevTools 支持，可卸载冗余的 redux-devtools-extension 依赖：

npm uninstall redux-devtools-extension
# 或使用 yarn
yarn remove redux-devtools-extension

• RTK 的 configureStore 会自动完成以下操作：
  • 自动启用 Redux DevTools（生产环境默认关闭）
  • 添加默认中间件（thunk、不可变数据检查、序列化校验等）
  • 支持直接传入分模块 reducer 对象（如 { user: userReducer, books: bookReducer }）
• 若需自定义 DevTools 行为，可在配置对象中添加 devTools 字段控制：

  configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware),
    devTools: process.env.NODE_ENV !== 'production' // 手动控制开关，默认逻辑一致
  })
  

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