尝试在 redux 中将中间件添加到我的商店以禁用“在操作中检测到不可序列化的值”消息时出错

Question

我正在尝试禁用具有不可序列化类实例的自定义存储的错误消息。我找到了一个对其他人有用的答案，但在尝试设置它时收到错误消息

我在state.ts中的代码：

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

export type AppState = {
    user: UserModel;
}


const userSlice = createSlice({
    name: "users",
    initialState: null,
    reducers: {login, logout}

});
 


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

export const store = configureStore<AppState>({
    reducer: { 
        user: userReducer,
        middleware: getDefaultMiddleware =>
            getDefaultMiddleware({
              serializableCheck: false,
            }),
    }
});

用户模型：

export class UserModel{
    public firstName?: string;
    public lastName?: string;


    constructor(firstName: string, lastName: string){
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

我的减速器代码：

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

export function login(currentState: UserModel, action:PayloadAction<UserModel>): UserModel{
    const newState = action.payload;
    return newState;
}

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

我遇到的错误是：

ERROR in src/Redux/state.ts:25:9
TS2322: Type '{ user: Reducer<any, UnknownAction, any>; middleware: (getDefaultMiddleware: any) => any; }' is not assignable to type 'Reducer<AppState, UnknownAction, AppState> | { user: Reducer<UserModel, UnknownAction, UserModel>; }'.
  Object literal may only specify known properties, and 'middleware' does not exist in type 'Reducer<AppState, UnknownAction, AppState> | { user: Reducer<UserModel, UnknownAction, UserModel>; }'.
    23 |     reducer: {
    24 |         user: userReducer,
  > 25 |         middleware: getDefaultMiddleware =>
       |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 26 |             getDefaultMiddleware({
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 27 |               serializableCheck: false,
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 28 |             }),
       | ^^^^^^^^^^^^^^^
    29 |     }
    30 | });

ERROR in src/Redux/state.ts:25:21
TS7006: Parameter 'getDefaultMiddleware' implicitly has an 'any' type.
    23 |     reducer: {
    24 |         user: userReducer,
  > 25 |         middleware: getDefaultMiddleware =>
       |                     ^^^^^^^^^^^^^^^^^^^^
    26 |             getDefaultMiddleware({
    27 |               serializableCheck: false,
    28 |             }),

我尝试在线寻找解决方案并按照 Redux Toolkit 建议的方式进行操作，但我不断收到类似的错误消息

Answer 1

middleware

不应该是

reducer

道具的子道具。您必须将其提升一个级别并使其成为一级属性。

export const store = configureStore<AppState>({
    reducer: { 
        user: userReducer,
    },
    middleware: getDefaultMiddleware =>
        getDefaultMiddleware({
          serializableCheck: false,
        }),
});

您可以阅读 https://redux.js.org/tutorials/essentials/part-6-performance-normalization#setting-up-the-listener-middleware 了解更多详细信息。