React+Redux+RTK Query中如何实现API调用的顺序与条件执行

针对你遇到的缓存、时序、Hook规则及无效请求问题，这里提供一个符合RTK Query最佳实践的实现方案，核心思路是利用RTK Query的skip参数控制请求触发，结合自定义Hook封装逻辑，确保完全遵守React规则且避免无效请求。

1. 封装useCurrentUserId Hook #

先封装一个专门获取当前登录用户ID的Hook，处理myUserProfile接口的请求、缓存和状态：

import { useMyUserProfileQuery } from './services/api'; // 替换为你的API slice路径

export const useCurrentUserId = () => {
  const { data: userProfile, isLoading, error } = useMyUserProfileQuery(undefined, {
    // 禁用自动重渲染时的重复请求，依赖缓存提升性能
    refetchOnMountOrArgChange: false,
    // 如果页面刷新后缓存失效，允许后台静默重获取
    refetchOnReconnect: true,
  });

  return {
    currentUserId: userProfile?.user_id,
    isLoadingCurrentUser: isLoading,
    currentUserError: error,
  };
};

这个Hook会返回当前用户ID、加载状态和错误信息，同时利用RTK Query的默认缓存机制，确保后续调用直接复用已有结果。

2. 实现用户信息Stub组件 #

在组件中组合传入的user_id和useCurrentUserId的结果，通过skip参数精准控制userStub接口的请求时机：

import { useUserStubQuery } from './services/api'; // 替换为你的API slice路径
import { useCurrentUserId } from './hooks/useCurrentUserId';

interface UserStubProps {
  userId?: string; // 可选传入的用户ID
}

export const UserStub = ({ userId: propUserId }: UserStubProps) => {
  // 顶层调用Hook，完全符合React规则
  const { currentUserId, isLoadingCurrentUser, currentUserError } = useCurrentUserId();

  // 优先使用传入的userId，无传入则用当前登录用户的ID
  const targetUserId = propUserId || currentUserId;

  // 只有当targetUserId存在时才发起请求，否则跳过
  const { data: userStub, isLoading: isLoadingStub, error: stubError } = useUserStubQuery(targetUserId, {
    skip: !targetUserId,
    // 当targetUserId变化时自动重新请求（比如从传入ID切换到当前用户ID）
    refetchOnMountOrArgChange: true,
  });

  // 统一处理加载状态
  if (isLoadingCurrentUser || (targetUserId && isLoadingStub)) {
    return <div>加载中...</div>;
  }

  // 统一处理错误状态
  if (currentUserError || stubError) {
    return <div>加载用户信息失败，请稍后重试</div>;
  }

  // 无可用用户ID的场景（未登录且未传入ID）
  if (!targetUserId) {
    return <div>暂无用户信息</div>;
  }

  // 渲染脱敏后的用户信息
  return (
    <div className="user-stub">
      <p>用户名：{userStub?.desensitizedName}</p>
      <p>邮箱：{userStub?.desensitizedEmail}</p>
      {/* 其他脱敏字段 */}
    </div>
  );
};

3. 关键细节说明 #

• 避免无效请求：通过skip: !targetUserId，只有当存在有效用户ID时才会触发userStub接口请求，彻底解决null时的无效调用问题。
• 遵守Hook规则：所有RTK Query Hook和自定义Hook都在组件顶层调用，没有条件判断包裹，完全符合React的Hook调用规则。
• 解决缓存与时序问题：useMyUserProfileQuery的缓存机制确保后续调用直接复用结果，同时targetUserId的赋值逻辑自然等待当前用户ID加载完成后才会触发userStub请求，不存在时序混乱。
• 状态统一管理：集中处理加载和错误状态，避免组件内状态分散导致的逻辑混乱。

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