Error when trying to add middleware to my store in redux to disable "A non-serializable value was detected in an action" message

I'm trying to disable the error messages for my custom store which has a non serializeable class instance. I found an answer that worked for others but I'm getting error messages when trying to set it up

My code in 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,
            }),
    }
});

The user model:

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


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

my reducers code:

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;
}

The errors I'm getting are:

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 |             }),

I tried to look for solutions online and do it in the ways suggested Redux Toolkit but I keep getting similar error messages

Solution

middleware should not be a child prop of the reducer prop. You will have to move it up a level and make it a first level property.

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

You could read https://redux.js.org/tutorials/essentials/part-6-performance-normalization#setting-up-the-listener-middleware for more details.