从createAsyncThunks迁移至RTK-Query：页面加载条件请求实现

核心思路 #

RTK-Query的useQuery钩子默认会自动发起请求，我们可以通过skip参数控制请求时机，同时利用其内置的缓存和状态管理替代原有的Redux Store手动检查逻辑。

具体实现代码 #

const InitApp = () => {
  // 获取用户数据，RTK-Query自动处理缓存与请求发起
  const { data: user, isLoading: userLoading } = useGetUserQuery();

  // 仅当用户数据存在时，才触发其他接口请求（通过skip参数控制）
  const { isLoading: mediasLoading } = useGetRawMediasQuery(undefined, { skip: !user });
  const { isLoading: facesLoading } = useGetFacesQuery(undefined, { skip: !user });
  const { isLoading: projectsLoading } = useGetProjectsQuery(undefined, { skip: !user });

  // 用户数据仍在加载时，显示加载组件
  if (userLoading) {
    return <Loader areaLoader />;
  }

  // 用户数据不存在时，可根据业务逻辑处理（示例为跳转登录页）
  if (!user) {
    return <Navigate to="/login" />;
  }

  // 用户数据就绪后渲染页面内容，其余请求会在后台自动完成
  return <Outlet />;
};

关键说明 #

1. 自动请求与缓存：useGetUserQuery()会在组件挂载时自动发起请求，后续优先使用缓存数据，无需手动检查Store状态。
2. 条件请求控制：通过skip: !user参数，让其他三个请求仅在用户数据存在时才发起，避免无效请求。
3. 加载状态处理：直接使用RTK-Query返回的isLoading状态判断加载状态，无需手动维护ref标记（RTK-Query会自动处理组件卸载时的请求取消）。
4. 错误处理扩展：若需处理请求失败场景，可解构error参数做对应处理：

   const { data: user, isLoading: userLoading, error: userError } = useGetUserQuery();
   if (userError) {
     return <div>获取用户信息失败：{userError.message}</div>;
   }
   

与原逻辑的对比 #

• 原逻辑手动dispatch多个action并通过Promise.all等待，RTK-Query通过钩子自动管理请求生命周期，代码更简洁。
• 无需手动在Store中维护user等数据的状态，RTK-Query的缓存层会自动处理数据存储与更新。

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