Next.js项目中redux-persist页面切换状态重置问题求助

问题根源 #

页面切换时状态被重置，核心原因是Next.js的HYDRATE动作会将服务器端的初始状态覆盖客户端从localStorage恢复的持久化状态。你的search切片中，HYDRATE处理逻辑是无条件合并服务器端的search状态，而服务器端生成的store状态是初始值，这就导致客户端已保存的状态被重置。

修复方案 #

1. 修改Search切片的HYDRATE处理逻辑 #

在search切片的extraReducers中，添加判断逻辑：只有当服务器端的search状态不是初始值时，才进行合并；如果是初始值，则保留客户端的持久化状态。

修改后的代码：

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 isInitialSearchState = (state: searchStateType): boolean => {
  return state.dataBar.location === '' &&
         state.dataBar.date.from === undefined &&
         state.dataBar.date.to === undefined &&
         state.dataBar.number.adults === 1 &&
         state.dataBar.number.child === 0 &&
         state.dataBar.number.rooms === 1;
}

const searchDataSlice = createSlice({
   name: 'search',
   initialState,
   reducers: {
      searchbar: (state, action: PayloadAction<searchStateType>) => {
         state.dataBar = { ...action.payload.dataBar }
      }
   },
   extraReducers: {
      [HYDRATE]: (state, action) => {
         const serverSearchState = action.payload.search;
         // 仅当服务器端状态不是初始值时，才合并覆盖客户端状态
         if (!isInitialSearchState(serverSearchState)) {
            return {
               ...state,
               ...serverSearchState
            }
         }
         // 服务器端是初始状态，保留客户端持久化的状态
         return state;
      },
   }
})

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

2. 在_app.tsx中配置PersistGate #

你当前的store配置中已经初始化了persistStore，但需要在根组件中用PersistGate包裹，确保redux-persist完成状态恢复后再渲染页面，避免初始渲染时使用服务器端的初始状态。

修改你的_app.tsx（或_app.jsx）：

import { wrapper } from '../store'; // 导入你的store wrapper
import { PersistGate } from 'redux-persist/integration/react';
import { store } from '../store'; // 导入你的store实例

function MyApp({ Component, pageProps }) {
  return (
    <PersistGate loading={null} persistor={(store as any).__persistor}>
      <Component {...pageProps} />
    </PersistGate>
  );
}

export default wrapper.withRedux(MyApp);

3. 验证Store配置细节 #

确保客户端store的persistConfig和中间件配置正确：

• whitelist: ['search'] 正确指定了需要持久化的slice
• 中间件忽略了redux-persist的内部动作（FLUSH, REHYDRATE等），避免序列化报错

验证修复 #

完成上述修改后：

1. 修改search状态，确认localStorage中已保存对应数据
2. 切换页面，检查store中的search状态是否保持修改后的值，而非被重置为初始值

内容的提问来源于stack exchange，提问作者Стас Лабанов