如何基于RTK Query实现全局加载指示器（监听所有Queries及后台请求的isFetching状态）

好问题！RTK Query其实内置了专门的工具来搞定这种全局加载状态的监听，完全能实现你想要的「任意Query处于请求中（包括后台请求）时显示全局加载指示器」的需求，具体做法很直接：

核心工具：useIsFetching 钩子 #

RTK Query提供的useIsFetching钩子会返回当前处于fetching状态的Query请求总数——不管是前台的初始请求，还是后台自动触发的重新获取（比如背景刷新、refetch操作），都会被统计进来，正好匹配你的需求。

实现全局加载指示器 #

你可以创建一个全局组件，用这个钩子判断是否有活跃请求，然后渲染加载提示：

import { useIsFetching } from '@reduxjs/toolkit/query/react';

export function GlobalLoadingIndicator() {
  // 只要有至少一个请求在进行，hasActiveRequests就为true
  const hasActiveRequests = useIsFetching() > 0;

  if (!hasActiveRequests) return null;

  // 这里是一个简单的顶部加载条样式，你可以换成自己的加载组件
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      height: 4,
      backgroundColor: '#2196F3',
      zIndex: 9999,
      transition: 'width 0.2s ease'
    }} />
  );
}

然后把这个组件放到你的App根组件里，让它全局生效：

function App() {
  return (
    <>
      <GlobalLoadingIndicator />
      {/* 你的应用路由、页面组件等内容 */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* 其他路由 */}
      </Routes>
    </>
  );
}

进阶：细粒度控制监听范围 #

如果不需要监听所有请求，而是想指定只监听某个API slice，或者排除特定的请求，可以给useIsFetching传参数：

1. 只监听特定API slice：

// 假设你的API slice是用createApi创建的名为`postsApi`的实例
const isFetchingPosts = useIsFetching({ api: postsApi }) > 0;

2. 只监听特定endpoint：

// 只监听`getPosts`这个endpoint的请求
const isFetchingPosts = useIsFetching({ endpoint: 'getPosts' }) > 0;

3. 自定义匹配规则：
   用matcher函数来精确筛选要监听的请求，比如排除某个endpoint：

const isFetchingExceptUser = useIsFetching({
  matcher: (action) => action.endpointName !== 'getCurrentUser'
}) > 0;

默认情况下，useIsFetching会包含所有类型的fetching请求，包括后台的重新获取，完全符合你需要监听后台请求的场景~

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