React-Redux项目中如何访问Redux store存储的登录用户信息

核心错误点 #

你在rootReducer中将authReducer挂载到了auth命名空间下，因此Redux全局store的实际结构为{ auth: { isLoading: Boolean, user: 你的用户数据 } }，原profile.js中直接取state.user缺少了auth层级，导致无法正确获取数据。

具体修改步骤 #

• 第一步：修正profile.js的取值路径 #

修改useSelector的取值逻辑，同时添加空值判断避免渲染报错，不要直接渲染整个用户对象/数组，需要取具体字段展示：

import React from 'react'
import { useSelector } from 'react-redux'

export const EditProfile = () => {
  // 先取auth命名空间，再取对应字段
  const user = useSelector((state) => state.auth.user);
  const isLoading = useSelector((state) => state.auth.isLoading);

  if (isLoading) return <div>加载中...</div>
  return (
    <div>
      <p>用户名：{user?.username}</p>
      <p>邮箱：{user?.email}</p>
      {/* 按需添加其他需要展示的用户字段 */}
    </div>
  )
}

• 第二步：可选优化（避免渲染异常） #

如果你的登录接口返回的用户数据是对象类型，建议将authReducer的初始user值从空数组改为空对象/空值，匹配实际数据类型：

// authReducer.js 仅修改初始state即可，其他逻辑不变
export default (state = { isLoading: true, user: null }, action) => {
  switch(action.type){
    // 原有case逻辑保持不变
    case LOGIN_SUCCESS:
      localStorage.setItem('token',action.payload.token);
      return {
        ...state,
        user: action.payload.data,
      }
    case LOGIN_FAIL:
      return state;
    case REGISTER_SUCCESS:
      return {
        ...state,
        user: action.payload.data,
      }
    case REGISTER_FAIL:
      return state;
    default:
      return state;
  }
}

• 第三步：根组件配置排查 #

确保项目入口文件（一般为src/index.js）已经用Provider组件包裹了根组件，并且正确传入了导出的store：

// 项目入口index.js示例
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

• 验证排查 #

修改完成后触发登录操作，打开Redux DevTools查看auth分支下的user字段是否有值，确认登录action的payload.data是否正确返回了用户信息即可。

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