Next.js中Redux DevTools扩展配置失效，增强器类型报错求助

问题根源 #

1. 冗余手动组合：Redux Toolkit的configureStore已内置applyMiddleware和DevTools集成，无需手动用compose组合两者
2. 类型不匹配：enhancers选项接受返回增强器数组的函数或增强器数组，但你写的composeEnhancers是组合后的增强器函数，直接放入数组会触发类型冲突
3. 语法错误：middleware配置中的箭头函数缺失>，导致语法不完整

修复步骤 #

1. 清理冗余依赖 #

移除不需要的导入：

// 删除以下导入
import { composeWithDevTools } from "@redux-devtools/extension";
import { applyMiddleware, compose } from "redux";

2. 修正Store配置 #

简化configureStore配置，利用RTK内置能力：

• 保留devTools开关，RTK会自动处理DevTools集成
• 修正middleware的箭头函数语法
• 移除自定义的composeEnhancers和enhancers数组（无额外自定义增强器时）

3. 修改后的完整代码 #

import { configureStore } from "@reduxjs/toolkit";
import {
  TypedUseSelectorHook,
  useDispatch as useAppDispatch,
  useSelector as useAppSelector,
} from "react-redux";

import rootReducer from "./rootReducer";

export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;

const store = configureStore({
  reducer: rootReducer,
  // 修正箭头函数语法
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  // RTK自动处理DevTools，只需设置环境开关
  devTools: process.env.NODE_ENV !== 'production',
});

const { dispatch } = store;

const useSelector: TypedUseSelectorHook<RootState> = useAppSelector;
const useDispatch = () => useAppDispatch<AppDispatch>();

export { store, dispatch, useSelector, useDispatch };

如需自定义增强器 #

若要添加额外增强器，使用函数形式的enhancers选项合并默认增强器：

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  devTools: process.env.NODE_ENV !== 'production',
  // 函数形式合并默认与自定义增强器
  enhancers: (defaultEnhancers) => [
    ...defaultEnhancers,
    // 在此添加你的自定义增强器，如redux-batched-subscribe
  ],
});

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