redux-persist resets the state when updating the page - redux

Question

I use redux-persist in my Next js project. The status is saved in localStorage when the store is changed, but it is reset when the page is changed. What could be the problem? One of the reduser. I'm not sure, but maybe this problem is caused by 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
store
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);
please help me solve this problem

Answer 1

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