React Redux全局变量访问问题：无法获取更新后的用户状态

1. Dispatch 是异步操作，无法立即获取更新后的状态 #

Redux 状态更新是异步的，你在 dispatch(userInfo(...)) 后立刻执行 console.log(user)，此时组件还未重新渲染，拿到的仍是更新前的旧状态。

解决方法：

• 若要查看更新后的状态，可在组件顶层（而非点击事件内部）添加 console.log(user)，组件会在状态更新后自动重渲染，此时就能拿到最新值。
• 或使用 useEffect 监听 user 的变化：

import { useEffect } from 'react';

// 组件内部
useEffect(() => {
  console.log('更新后的user状态:', user);
}, [user]);

2. UserSlice 中 reducer 字段匹配错误 #

你的 userInfo reducer 里，赋值时使用的字段和 dispatch 传入的 payload 不匹配，同时状态层级也有误：

• dispatch 传入的是 { userName, email, role, image }，但 reducer 里写的是 action.payload.name（应为 action.payload.userName），导致状态无法正确赋值。
• initialState 里的 isLoading 是和 user 同级的顶层属性，你写的 state.user.isLoading 属于错误层级，应直接修改 state.isLoading。

修正后的 UserSlice.js：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  isLoading: false,
  user: {
    userName: '',
    email: '',
    image: '',
    role: '',
  },
};

export const userStatusSlice = createSlice({
  name: 'userStatus',
  initialState,
  reducers: {
    userInfo: (state, action) => {
      state.user.userName = action.payload.userName;
      state.user.email = action.payload.email;
      state.user.role = action.payload.role;
      state.user.image = action.payload.image;
      state.isLoading = action.payload.isLoading;
    },
  },
});

export const { userInfo } = userStatusSlice.actions;

export default userStatusSlice.reducer;

3. Page.js 中变量赋值冗余（可优化） #

你从 user 解构出字段后重新赋值的操作完全多余，直接用 session 和按钮值构造 payload 即可，避免逻辑混淆：

优化后的 handleClick 函数：

const handleClick = (e) => {
  e.preventDefault();
  const buttonValue = e.target.value;
  if (!session?.user) return; // 增加session存在性判断，避免报错

  const payload = {
    userName: session.user.name,
    email: session.user.email,
    role: buttonValue,
    image: session.user.image,
    isLoading: false, // 根据业务需求设置isLoading值
  };

  if (['Brand', 'Agency'].includes(buttonValue)) {
    dispatch(userInfo(payload));
  } else {
    console.log('This role does not exist');
  }
};

4. 额外建议：增加 Session 加载状态判断 #

useSession 返回的 data 可能为 undefined（比如未加载完成时），建议增加加载状态判断，避免访问 session.user 时报错：

const { data: session, status } = useSession();

if (status === 'loading') {
  return <div>Loading...</div>;
}

if (!session) {
  return <div>Please login</div>;
}

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