Redux Toolkit v2.6.0 发布：RTK Query 无限查询功能详解

Redux Toolkit 是 Redux 官方推荐的工具集，它简化了 Redux 的使用方式，提供了诸如 createSlice、configureStore 等实用工具。其中 RTK Query 是 Redux Toolkit 内置的数据获取和缓存解决方案，自 2021 年发布以来已成为许多 React 应用的首选数据获取方案。

在最新发布的 v2.6.0 版本中，Redux Toolkit 团队为 RTK Query 带来了备受期待的无限查询(Infinite Query)功能支持。这一功能允许开发者轻松实现分页数据加载、无限滚动等常见场景，大大扩展了 RTK Query 的应用范围。

无限查询功能解析

无限查询的核心思想是能够按需加载更多数据页，同时保持对已加载数据的缓存管理。Redux Toolkit 团队经过长期调研，最终决定采用与 React Query 相似的 API 设计，这种设计已经被社区广泛验证。

定义无限查询端点

在 API 定义中，现在可以使用 build.infiniteQuery() 方法来创建支持无限查询的端点。与普通查询相比，它需要额外配置一些参数：

const pokemonApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/pokemon' }),
  endpoints: (build) => ({
    getInfinitePokemon: build.infiniteQuery<Pokemon[], string, number>({
      infiniteQueryOptions: {
        initialPageParam: 1,  // 初始页码
        maxPages: 3,         // 最大缓存页数
        getNextPageParam: (lastPage, allPages, lastPageParam) => 
          lastPageParam + 1,  // 计算下一页参数
        getPreviousPageParam: (firstPage, allPages, firstPageParam) => 
          firstPageParam > 0 ? firstPageParam - 1 : undefined
      },
      query({ queryArg, pageParam }) {
        return `/type/${queryArg}?page=${pageParam}`
      },
    }),
  }),
})

这里需要注意三个泛型参数：ResultType(单页数据类型)、QueryArg(查询参数类型)和PageParam(页码参数类型)。infiniteQueryOptions 中的回调函数负责计算前后页的参数，开发者可以根据实际业务需求灵活调整这些逻辑。

使用无限查询 Hook

在 React 组件中，可以使用自动生成的 useInfiniteQuery hook 来获取数据和触发加载更多操作：

function PokemonList({ pokemonType = 'fire' }) {
  const {
    data,               // 包含 pages 和 pageParams 的数据结构
    isFetching,         // 加载状态
    fetchNextPage,      // 加载下一页函数
    fetchPreviousPage,  // 加载上一页函数
  } = api.useGetInfinitePokemonQuery(pokemonType)

  // 将多页数据展平为单个数组
  const allPokemon = data?.pages.flat() ?? []

  // 渲染逻辑...
}

data 对象的结构为 { pages: ResultType[], pageParams: PageParam[] }，这种设计让开发者可以灵活处理分页数据的展示方式。

实现细节与优化

Redux Toolkit 团队在实现这一功能时进行了大量优化工作，最终将包体积增加控制在约 4.2KB(压缩后)。虽然这部分代码会包含在所有使用 RTK Query 的应用中，但考虑到它提供的强大功能，这个体积增加是合理的。

值得注意的是，无限查询的核心逻辑是 UI 无关的，这意味着它不仅可以在 React 中使用，也可以与其他视图层框架配合使用。React 绑定只是提供了方便的 Hook 封装。

应用场景与最佳实践

无限查询功能特别适合以下场景：

1. 分页列表：传统的页码分页或"加载更多"按钮
2. 无限滚动：当用户滚动到列表底部时自动加载更多内容
3. 按需加载：基于用户交互动态加载更多数据
4. 双向加载：同时支持向前和向后加载更多内容

在实际开发中，开发者应该注意：

• 合理设置 maxPages 以避免内存占用过高
• 在 getNextPageParam 中实现适当的检查逻辑
• 考虑添加防抖逻辑以避免快速连续触发多次加载
• 对于移动端应用，可以结合 Intersection Observer 实现自动加载

总结

Redux Toolkit v2.6.0 的无限查询功能为 RTK Query 生态系统带来了重要的能力扩展。这一功能的加入使得 RTK Query 在数据获取场景中的竞争力进一步提升，特别是对于那些需要处理分页数据的应用。

通过借鉴 React Query 成熟的 API 设计，Redux Toolkit 团队确保了这一功能的易用性和灵活性。开发者现在可以更轻松地实现复杂的分页数据加载逻辑，而无需引入额外的库或编写大量样板代码。

随着这一功能的加入，RTK Query 现在能够覆盖更广泛的应用场景，为开发者提供更全面的数据管理解决方案。对于已经在使用 Redux Toolkit 的项目来说，这无疑是一个值得升级的重要版本。