无法在React组件外获取Redux状态，currentUser为空该如何解决

问题原因 #

• 模块顶层读取状态逻辑错误：authUser.js 中在模块初始化阶段就执行了 store.getState() 读取用户状态，此时 store 还未完成用户数据注入（可能是登录逻辑未执行、persist 持久化数据未恢复），读取到的是初始空值，且后续 store 更新不会主动同步到这个顶层变量，所以 currentUser 一直为空。
• 不必要的 async 标记：两个工具方法没有任何异步逻辑，添加 async 会导致返回值是 Promise 对象而非布尔值，因此控制台打印 [object Promise]，JSX 中的条件判断也完全失效。
• 组件未订阅状态变化：直接调用工具方法读取 store 不会触发组件重渲染，后续用户状态更新后，侧边栏的权限判断也不会自动更新。

修复方案 #

1. 改造 authUser.js 工具文件

每次调用权限方法时实时读取最新的 store 状态，去掉多余的 async 标记，增加边界兼容：

import _ from "lodash";
import { store } from "../store";

const adminRole = ["superAdmin", "admin"];

// 每次调用实时获取最新用户数据
function getCurrentUser() {
  const state = store.getState();
  return state?.auth?.user || {};
}

export function havePermission(permission) {
  if (isAdmin()) return true;
  const currentUser = getCurrentUser();
  return _.includes(currentUser.permissions || [], permission);
}

export function isAdmin() {
  const currentUser = getCurrentUser();
  return adminRole.includes(currentUser.role);
}

export default {
  isAdmin,
  havePermission,
};

2. 改造 sidebar.jsx 组件

通过 useSelector 订阅 Redux 中的用户状态，用户状态变化时自动触发组件重渲染，更新权限判断结果：

import { useSelector } from "react-redux";
import authUser from "../../../utils/authUser";

const Sidebar = () => {
  // 订阅用户状态，触发自动重渲染
  const user = useSelector(state => state.auth.user);

  return(
    <div>
      {console.log(` have permission called >> ${authUser.havePermission("product-view")}`)}
      {authUser.havePermission("view-name") && "Dummy Name"}
    </div>
  )
}

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