Reactjs 在Reaction+Redux+RTKQuery中对API调用进行排序

我很难理解reaction/redux/rtkQuery是如何使用的.我知道这可能是个愚蠢的问题.不幸的是，除了许多参考文献说这不能用这种方式做之外，我找不到一个建议如何才能达到预期的效果.下面显示了我想要做的事情的代码片段.

具体地说，我使用的是使用rtkQuery构建的API Slice.

• 一个端点myUserProfile获取当前登录用户的用户配置文件.这本身就是有效的.
• 另一端点userStub获得任何指定用户的编辑用户简档.如果我为组件提供了一个静态的user_id，这也是有效的.

我想要做的是创建一个呈现用户配置文件存根的组件.如果指定了user_id，则会显示该user_id的配置文件.如果不是，那么我希望使用myUserProfile来获取当前登录用户的user_id.

但是，不能保证在呈现该组件时缓存中存在myUserProfile结果.这意味着:

• 如果没有指定user_id，那么我实际上不能调用userStub，因为我没有一个有效的参数来给它.
• myUserProfile可能需要一些时间来检索用户配置文件.
• 由于条件呈现，特别是对profileIsFetching的判断，我将在组件的不同执行中使用不同数量的钩子.这是不允许的.

如何实现有条件的API调用/API调用的排序才能达到这种效果？

import React from "react";
import { useMyUserProfileQuery, useUserStubQuery } from "../endpoints/user";


interface UserStubProps {
  user_id?: string;
}


const UserStub: React.FC<UserStubProps> = ({ user_id }) => {
  
  if (!user_id){
      const { data: profile, isFetching : profileIsFetching } = useMyUserProfileQuery();
      if (profileIsFetching){
        return (
          <div> Loading Profile ... </div>
        )
      }
      user_id = profile?.auth0.user_id!;
  }
  
  const { data, isFetching } = useUserStubQuery(user_id);    
  
  if (isFetching){
      return (
        <div>
          Loading ...
        </div>
      );
  }

  return (
      <div>
          <p> Name : {data?.name} </p>
          <p> Nickname : {data?.nickname} </p>
          <p> Picture : <img src={data?.picture.toString()}></img> </p>
          <p> User ID : {data?.user_id} </p>
      </div>
  )
}


export default UserStub;

编辑:

我try 创建自定义钩子，并按如下方式使用:

export const useCurrentUserId = () => {
    const { data, isLoading, isError } = useMyUserProfileQuery();
    const userId = data?.auth0?.user_id; 
    return { userId, isLoading, isError };
};

const UserStub: React.FC<UserStubProps> = ({ user_id }) => {
  const { userId, isLoading } = useCurrentUserId()
  
  if (!user_id) { user_id = userId; }
  
  // TODO this results in a bad request to the server with null 
  // user_id before the earlier hook completes. 
  const { data, isFetching } = useUserStubQuery(user_id!);    
  
  if (isFetching || isLoading){
      return ( <div> Loading ... </div>);
  }

  return (....)
}

然而，这几乎遇到了同样的问题.useUserStubQuery被空user_id调用，这会导致向API服务器发出错误的请求.