Redux配置Store添加Middleware禁用序列化检测时报错求助

错误原因分析 #

• middleware配置位置错误：configureStore的配置参数中，middleware是和reducer同级的顶层选项，你错误地将其放在了reducer对象内部，导致TypeScript检测到非法属性。
• getDefaultMiddleware参数隐式any类型：未为该参数指定正确类型，触发TS7006错误。
• State类型定义与初始状态不匹配：AppState中user定义为UserModel，但slice初始状态是null，类型冲突；同时reducer函数的参数类型未包含null的情况。

修复后的代码 #

state.ts #

import { configureStore, createSlice, GetDefaultMiddleware } from "@reduxjs/toolkit";
import { login, logout} from "./reducers";
import { UserModel } from "../Models/UserModel";

// 修正State类型，允许user为null
export type AppState = {
    user: UserModel | null;
}

const userSlice = createSlice({
    name: "users",
    // 明确初始状态类型
    initialState: null as UserModel | null,
    reducers: {login, logout}
});

export const userActions = userSlice.actions;
export const userReducer = userSlice.reducer;

export const store = configureStore<AppState>({
    reducer: { 
        user: userReducer,
    },
    // 将middleware移到顶层，与reducer同级
    middleware: (getDefaultMiddleware: GetDefaultMiddleware<AppState>) =>
        getDefaultMiddleware({
            serializableCheck: false, // 禁用序列化检查
        }),
});

reducers.ts #

import { PayloadAction } from "@reduxjs/toolkit";
import { UserModel } from "../Models/UserModel";

// currentState类型改为UserModel | null，匹配状态的实际可能值
export function login(currentState: UserModel | null, action: PayloadAction<UserModel>): UserModel {
    const newState = action.payload;
    return newState;
}

export function logout(currentState: UserModel | null, action: PayloadAction<null>): null {
    return null;
}

说明 #

• 调整middleware的位置到顶层配置后，符合configureStore的参数结构，解决了非法属性的TypeScript报错。
• 引入GetDefaultMiddleware<AppState>类型，消除了参数隐式any的问题。
• 修正State和reducer参数的类型定义，确保了状态类型的一致性，避免潜在的类型冲突。

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