Type error of slice file

[Alex Moshi Lam]

import { createSlice } from "@reduxjs/toolkit";
import { AppState } from "./store";
import { HYDRATE } from "next-redux-wrapper";

// Type for our state
export interface AuthState {
  authState: boolean;
}

// Initial state
const initialState: AuthState = {
  authState: false,
};

// Actual Slice
export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    // Action to set the authentication status
    setAuthState(state, action) {
      state.authState = action.payload;
    },

    // Special reducer for hydrating the state. Special case for next-redux-wrapper
    extraReducers: {
      [HYDRATE]: (state, action) => {
        return {
          ...state,
          ...action.payload.auth,
        };
      },
    },
  },
});

export const { setAuthState } = authSlice.actions;

export const selectAuthState = (state: AppState) => state.auth.authState;

export default authSlice.reducer;

in extraReducers , type error occur. the error message is below
"""
Type '{ NEXT_REDUX_WRAPPER_HYDRATE: (state: any, action: any) => any; }' is not assignable to type 'CaseReducer<AuthState, { payload: any; type: string; }> | CaseReducerWithPrepare<AuthState, PayloadAction<any, string, any, any>>'.
Object literal may only specify known properties, and '[HYDRATE]' does not exist in type 'CaseReducer<AuthState, { payload: any; type: string; }> | CaseReducerWithPrepare<AuthState, PayloadAction<any, string, any, any>>'.
"""

Please help

this is nextjs Typescript project

[Danylo]

@alexlam184
Had the same issue, try this

extraReducers: { [HYDRATE]: (state: AuthState, action: PayloadAction<{ auth: AuthState }>) => ({ ...state, ...action.payload.auth, }), },

[Levi]

@alexlam184
reducers and extraReducers should be at the same level.
Like this:

{
    reducers: {}
    extraReducers: {}
}