RTK Query如何重置isLoading值实现分参数加载态控制

RTK Query 内置的isLoading标记仅在当前请求对应全新的、无任何历史缓存的条目时才会返回true。当前写法将分页参数count和线程参数threadId同时作为缓存键组成部分，没有对「切换线程的全量加载」和「同线程分页加载」两个场景做区分，才会出现切换线程不触发全屏加载、直接替换判定条件又会让分页加载也弹出全屏Spinner的问题。

方案1：组件层快速修复（无需修改API定义，适配现有代码） #

直接利用RTK Query返回的fulfilledArgs字段做判定，不需要引入额外状态、也不用改动接口层定义：
fulfilledArgs会存储最近一次请求成功返回对应的参数，不管当前请求参数怎么变，只要新请求还没成功返回，这个值就会保持上一次成功请求的参数不变。
基于这个特性，全屏Spinner的判定逻辑可以写成：isFetching && (!data || fulfilledArgs?.threadId !== threadId)，完全覆盖三类场景的预期：

• 首次进入页面：无任何历史数据，data为undefined，isFetching为true → 展示全屏Spinner
• 同线程滚动加载更多：上一次成功返回的threadId和当前线程ID一致，isFetching为true → 不触发全屏Spinner，仅展示底部小型Spinner
• 切换threadId：上一次成功返回的threadId是旧线程ID，和当前线程ID不匹配，isFetching为true → 展示全屏Spinner

修改后的代码如下：

// 解构出fulfilledArgs字段
const { data, isFetching, fulfilledArgs } = useGetPostsQuery({ count: 25 * pageNumber, threadId })

const showFullScreenSpinner = isFetching && (!data || fulfilledArgs?.threadId !== threadId)

if (showFullScreenSpinner) {
  return <Spinner isFullScreen />
}

if (data?.length) {
  return (
    <>
      ...Content
      {isFetching && <Spinner variant='sm' />}
    </>
  )
}

方案2：API层优化（适合长期维护的无限滚动场景） #

如果后续会持续迭代这个无限滚动功能，推荐直接修改endpoint定义，利用RTK Query的增量缓存能力，让内置的isLoading天然符合交互预期，不需要在组件层写额外判定逻辑：

1. 用serializeQueryArgs配置，仅将threadId作为缓存键的唯一标识，忽略分页参数count，保证同一线程下的所有分页请求都对应同一个缓存条目
2. 用merge函数配置，将新加载的分页数据追加到已有缓存后，而不是直接替换旧数据
3. 配置forceRefetch规则，保证分页参数变化时会重新发起请求，不会直接读取旧缓存

endpoint定义示例：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: ({ count, threadId }) => `/posts?threadId=${threadId}&count=${count}`,
      // 仅用threadId作为缓存键，忽略count分页参数
      serializeQueryArgs: ({ queryArgs }) => {
        return { threadId: queryArgs.threadId }
      },
      // 新数据返回时，追加到旧缓存列表末尾
      merge: (currentCache = [], newItems) => {
        currentCache.push(...newItems)
      },
      // count参数变化时强制重新拉取，避免命中旧缓存
      forceRefetch({ currentArg, previousArg }) {
        return currentArg?.count !== previousArg?.count
      }
    })
  })
})

export const { useGetPostsQuery } = api

改完之后最初的组件代码不需要额外调整，isLoading会自动在首次加载、切换threadId时返回true触发全屏Spinner，分页加载时仅isFetching为true展示小型Spinner，完全符合交互预期。

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