reactjs - 有没有办法获取存储在 api slice [RTK Query] 中的所有响应？

Question

这是根据页面返回数据的钩子(Hook)

    const {
        data,
        isFetching,
        isLoading,
        isError,
    } = useGetResourceQuery(page, perPage );

这是api

    export const api = createApi({
        baseQuery: fetchBaseQuery({
            baseUrl: "http://localhost:3001",
        
        }),
        tagTypes: ["resource"],
        endpoints: (build) => ({
            getResource: build.query({
            query: (page = 1, perPage = 20) =>
                `resource?spage=${page}&limit=${perPage}`,
            }),
        }),
    });
    export const {useGetResourceQuery} = api

有什么办法可以提取所有查询的状态？
我想实现基于滚动的分页(无限滚动)
我们需要更新中间件吗？或者有什么方法可以访问状态并将其公开为上面的函数，
我浏览了文档但找不到解决方案
我可以使用本地状态并将它们连接起来，但想知道是否可以使用 RTK
谢谢

Answer 1

我认为大多数实现都将“无限滚动”的问题复杂化了很多。
您可以通过退后一步思考您真正需要的东西来实现这一点:

当前查看数据

在我们滚动到

的方向上有一些额外的数据

由于我们很懒惰并且不想跟踪我们滚动到的方向，所以假设

当前查看数据

双向的一些额外数据。

另外让我们假设查询返回一个响应

  {
    offset: 50,
    items: [...]
  }

所以假设一个页面足够大来包含一个屏幕的所有数据，我们最终会得到类似的东西

const currentPage = // something calculated from ScrollPosition

const lastResult = usePageQuery(currentPage - 1, { skip: currentPage === 1 }) // don't fetch pages before 0
const currentResult = usePageQuery(currentPage)
const nextResult = usePageQuery(currentPage + 1)

const combined = useMemo(() => {
  const arr = new Array(pageSize * (currentPage + 1))
  for (const data of [lastResult.data, currentResult.data, nextResult.data]) {
    if (data) {
      arr.splice(data.offset, data.items.length, ...data.items)
    }
  }
  return arr
}, [pageSize, currentPage, lastResult.data, currentResult.data, nextResult.data])

// work with `combined` here

由于您的组件未引用的请求将在存储中停留 60 秒，因此用户可以在没有进一步请求的情况下快速向上滚动多个页面 - 而且，可能永远不会再次滚动到的数据将从缓存中删除并必要时只需重新获取。