我在Next js项目中使用了redux-persist，当存储改变时状态保存在localStorage中，但是当页面改变时状态被重置，可能是什么问题？一个reduser，我不确定，但可能是SSR导致的问题

import { createSlice, PayloadAction } from "@reduxjs/toolkit"
import { HYDRATE } from "next-redux-wrapper";
import { searchStateType } from "../../models/reduserModels/reduserModels";

const initialState: searchStateType = {
   dataBar:
   {
      location: '',
      date: {
         from: undefined,
         to: undefined
      },
      number: {
         adults: 1,
         child: 0,
         rooms: 1
      }
   }
}

const searchDataSlice = createSlice({
   name: 'search',
   initialState,
   reducers: {
      searchbar: (state, action: PayloadAction<searchStateType>) => {
         state.dataBar = { ...action.payload.dataBar }
      }
   },
   extraReducers: {
      [HYDRATE]: (state, action) => {
         return {
            ...state,
            ...action.payload.search
         }
      },
   }
})

export const { searchbar } = searchDataSlice.actions
export default searchDataSlice.reducer

贮藏

const makeStore = () => {
   const isServer = typeof window === "undefined";

   const rootReduser = combineReducers({
      search: searchDataReduser,
      userData: userDataReduser,
      regions: regionsIdReduser,
      loading: visibleLoadingReduser,
      hotelsRegion: hotelsRegionReduser,
      hotelsId: hotelsIdReduser,
      room: roomBookingReduser,
      webRoom: webRoomBookingReduser,
      bookingRoomData: bookingRoomsUserDataReduser,
   });

   if (isServer) {
      const store = configureStore({
         reducer: rootReduser,
         middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware({
               immutableCheck: false,
               serializableCheck: false,
            }),
      });
      return store;
   } else {
      const persistConfig = {
         key: "nextjs",
         storage,
         whitelist: ['search']
      };

      const persistedReducer = persistReducer(persistConfig, rootReduser);

      const store = configureStore({
         reducer: persistedReducer,
         middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware({
               immutableCheck: false,
               serializableCheck: {
                  ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
               },
            }),
      });

      (store as any).__persistor = persistStore(store)

      return store;
   }
};

export const store = makeStore()
export type RootStore = ReturnType<typeof makeStore>;
export type RootState = ReturnType<RootStore['getState']>;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action>;
export type AppDispatch = typeof store.dispatch

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

export const wrapper = createWrapper<RootStore>(makeStore);

请帮我解决这个问题