next-redux-wrapper水合后useSelector返回初始值问题求助

问题原因 #

你的HYDRATE reducer逻辑存在判断逻辑的疏漏，导致首次页面加载时，服务器端传入的auth数据没有正确合并到客户端Redux store中：

• 首次加载时，客户端Redux store的auth.user初始值为null，if (state.auth.user)条件不触发，虽然你合并了action.payload（包含正确的服务器端auth数据），但对象合并的逻辑没有明确保障auth字段的正确继承，最终导致store中的auth数据未被正确初始化。
• 页面props中的auth是直接从getServerSideProps返回的独立数据，所以能拿到正确值，但Redux store中的auth状态异常，导致useSelector返回null。

修复方案 #

调整HYDRATE的处理逻辑，明确区分首次加载和客户端导航场景，确保auth数据的正确合并：

const reducer = (state: ReturnType<typeof rootReducer>, action: AnyAction) => {
  if (action.type === HYDRATE) {
    console.log('payload@HYDRATE', action.payload);
    return {
      ...state,
      ...action.payload,
      // 核心修复：客户端已有auth数据则保留，否则使用服务器端传来的auth数据
      auth: state.auth.user ? state.auth : action.payload.auth,
    };
  } else {
    return rootReducer(state, action);
  }
};

额外验证项 #

1. 确认authSlice的setUser逻辑正确：确保setUser action正确将服务器端返回的result数据映射到auth状态字段：

const authSlice = createSlice({
  name: 'auth',
  initialState: { user: null, token: null },
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload.user; // 确保字段与接口返回数据匹配
      state.token = action.payload.token;
    },
  },
});

2. 验证选择器正确性：确认selectCurrentUser选择器指向正确的store路径：

export const selectCurrentUser = (state) => state.auth.user;

3. 确保_app.tsx的Redux配置正确：

import { wrapper } from '../path/to/your/store';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default wrapper.withRedux(MyApp);

调整后，首次加载时客户端store会正确接收服务器端的auth数据，客户端导航时也会保留已有auth状态，你就能在任意组件中通过useSelector(selectCurrentUser)获取用户数据，无需props drilling。

内容的提问来源于stack exchange，提问作者Abdul Mahamaliyev