在普通函数中使用useSelector Hook报错，求Redux Toolkit通用架构方案

你遇到的问题核心是React Hook的调用规则限制：Hook只能在组件或自定义Hook的顶层调用，不能在普通函数、条件判断或循环内部使用。直接在LogoutUser普通函数里调用useCloseAlertTrigger会触发规则校验错误，而把选择器改成普通函数又会违反useSelector的调用规则。

下面提供两种符合React和Redux规范的实现方案：

方案1：将Redux状态作为参数传入通用函数 #

这是最直接的方式，保持通用函数的纯功能性，把需要的Redux状态从组件中获取后传入函数。

修改通用函数LogoutUser #

// commonFunction.js
export const LogoutUser = async (closeAlert) => {
  if (closeAlert) {
    const result = await DisplayMessageOnClosebookingEdit();
    if (result) {
      return false;
    }
  }
  const result = await RCM_API(
    'POST',
    '',
    {
      service: 'service',
      action: 'logout',
    },
    true
  );
  if (result && result.resultCode === STATUS.SUCCESS) {
    window.location.href = `${window.location.origin}/${BASE_PATH}/logout`;
  }
  return true;
};

在组件中调用通用函数 #

在组件内部通过自定义Hook获取Redux状态，再传给LogoutUser：

// 组件文件
import { useCloseAlertTrigger } from './selectors';
import { LogoutUser } from './commonFunction';

function UserSettings() {
  const closeAlert = useCloseAlertTrigger();

  const handleLogout = async () => {
    const logoutSuccess = await LogoutUser(closeAlert);
    if (!logoutSuccess) {
      // 处理取消logout的逻辑
    }
  };

  return (
    <button onClick={handleLogout} className="logout-btn">
      退出登录
    </button>
  );
}

方案2：将通用函数封装为自定义Hook #

如果LogoutUser的逻辑需要依赖多个Hook（不止当前的选择器），可以把它封装成自定义Hook，严格遵守Hook规则。

封装为自定义Hook #

// commonFunction.js
import { useCloseAlertTrigger } from './selectors';

// 自定义Hook必须以use开头命名
export const useLogoutHandler = () => {
  const closeAlert = useCloseAlertTrigger();

  const logoutUser = async () => {
    if (closeAlert) {
      const result = await DisplayMessageOnClosebookingEdit();
      if (result) {
        return false;
      }
    }
    const result = await RCM_API(
      'POST',
      '',
      {
        service: 'service',
        action: 'logout',
      },
      true
    );
    if (result && result.resultCode === STATUS.SUCCESS) {
      window.location.href = `${window.location.origin}/${BASE_PATH}/logout`;
    }
    return true;
  };

  return logoutUser;
};

在组件中使用Hook #

// 组件文件
import { useLogoutHandler } from './commonFunction';

function Navbar() {
  const logoutUser = useLogoutHandler();

  return (
    <nav>
      <button onClick={async () => await logoutUser()}>退出</button>
    </nav>
  );
}

为什么这两种方案可行？ #

• 方案1：通用函数变成纯函数，不依赖任何Hook，仅通过参数接收外部状态，完全符合React规则。
• 方案2：封装为自定义Hook后，所有Hook调用都在Hook的顶层，满足React的Hook调用要求，同时可以复用包含状态依赖的逻辑。

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