如何使用configureStore为Redux Store配置自定义中间件？

你用错了configureStore的参数格式——它只接受单个配置对象，不是像旧版createStore那样分开传递reducer和中间件。之前把middleWare作为第二个独立参数传入的写法，完全不符合API要求，所以中间件不会生效。

下面是两种常用的正确配置方式：

1. 仅使用自定义中间件（不保留默认中间件） #

如果你不需要Redux Toolkit自带的默认中间件（比如redux-thunk、状态不可变检查、序列化检查等），可以直接传入自定义中间件数组：

import { configureStore } from '@reduxjs/toolkit';
import theReducer from './yourReducerPath';
import logger from './yourLoggerMiddleware';

const store = configureStore({
  reducer: theReducer,
  middleware: [logger] // 直接将中间件放入数组
});

2. 保留默认中间件并添加自定义中间件（推荐） #

大多数场景下，你需要保留Redux Toolkit的默认中间件功能，同时加入自定义的logger。这时要借助getDefaultMiddleware方法合并中间件列表：

import { configureStore } from '@reduxjs/toolkit';
import theReducer from './yourReducerPath';
import logger from './yourLoggerMiddleware';

const store = configureStore({
  reducer: theReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
});

getDefaultMiddleware()会返回Redux Toolkit默认包含的中间件集合，通过concat把你的logger追加进去即可。

如果需要禁用某些默认中间件（比如关闭序列化检查），可以在getDefaultMiddleware中传入配置：

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: false // 关闭状态序列化检查
  }).concat(logger)

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