应用范围内的 RTK 查询加载和获取指标
App wide RTK query loading & fetching indicator
在我的 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 条以上的路线上使用相同的东西很麻烦。那么有什么方法可以为所有 10 个以上的端点显示一次 <LinearProgressIndicator />
吗?
您可以为此编写一个选择器:
const isLoading = useAppSelector((state) => {
return Object.values(state.api.queries).some((query) => {
return query && query.status === QueryStatus.pending;
});
});
在我的 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 条以上的路线上使用相同的东西很麻烦。那么有什么方法可以为所有 10 个以上的端点显示一次 <LinearProgressIndicator />
吗?
您可以为此编写一个选择器:
const isLoading = useAppSelector((state) => {
return Object.values(state.api.queries).some((query) => {
return query && query.status === QueryStatus.pending;
});
});