javascript - 应用范围内的 RTK 查询加载和获取指标

Question

在我的 React 应用中，我使用 RTK 查询来获取数据。我有 10+ API 端点和每个端点的路由。

我想在页面顶部显示一条水平线，以表明正在进行数据提取。

目前，我已经做到了。

const ArticlePage = () => {
  const { id} = useParams();
  const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);

  return (
    <Layout>
      {(isFetching || isLoading) && <LinearProgressIndicator />}
      <PageHead />
      {data && <ArticleContent article={data} />}
    </Layout>
  );
};

这个我也试过

const ArticlePage = () => {
  const { id} = useParams();
  const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);

  return (
    <Layout>
      <LinearProgressIndicator shouldDisplay={(isFetching || isLoading)} />
      <PageHead />
      {data && <ArticleContent article={data} />}
    </Layout>
  );
};

在所有 10 条以上的路线上使用相同的东西很麻烦。那么有没有办法显示<LinearProgressIndicator />一次用于所有 10 个以上的端点？

Answer 1

您可以为此编写一个选择器:

  const isLoading = useAppSelector((state) => {
    return Object.values(state.api.queries).some((query) => {
      return query && query.status === QueryStatus.pending;
    });
  });