Redux Toolkit中基于日期分页的无限滚动实现技巧

无限滚动分页的常见实现方式

在Redux Toolkit的RTK Query中，infiniteQuery通常用于实现无限滚动功能。大多数情况下，开发者会使用页码或偏移量作为分页参数，通过getNextPageParam和getPreviousPageParam来获取下一页或上一页的数据。

基于日期的分页场景挑战

当我们需要实现基于日期而非页码的分页时，情况会变得复杂一些。特别是在用户可以通过日期选择器直接跳转到特定日期的情况下，我们需要处理以下几个技术难点：

1. 初始加载时使用当前日期作为起始点
2. 滚动时按日期顺序加载前后日期的数据
3. 日期选择器跳转时需要重置分页状态

解决方案与实现细节

基本配置

首先，我们需要正确配置infiniteQuery：

const apiSlice = createApi({
  endpoints: (builder) => ({
    getDataByDate: builder.infiniteQuery({
      query: ({ date }) => `data?date=${date}`,
      initialPageParam: new Date().toISOString().split('T')[0], // 初始化为当前日期
      getNextPageParam: (lastPage) => {
        // 根据最后一条记录的日期计算下一天
        return getNextDay(lastPage.date);
      },
      getPreviousPageParam: (firstPage) => {
        // 根据第一条记录的日期计算前一天
        return getPreviousDay(firstPage.date);
      },
    }),
  }),
});

处理日期跳转

当用户通过日期选择器跳转到新日期时，我们需要：

1. 清除现有的分页缓存
2. 重置分页参数
3. 触发数据重新加载

// 清除缓存并重置分页参数
dispatch(
  apiSlice.util.updateQueryData(
    'getDataByDate',
    originalArgs,
    (draft) => {
      draft.pages = [];  // 清空已加载页面
      draft.pageParams = [newDate];  // 设置新的起始日期
    }
  )
);

// 触发重新加载
void refetch();

技术原理分析

这种实现方式之所以有效，是因为：

1. updateQueryData允许我们直接修改缓存中的数据
2. 清空pages数组会强制RTK Query重新获取数据
3. 设置新的pageParams确保了后续的分页操作基于新的日期开始

最佳实践建议

1. 日期格式化：确保所有日期参数使用一致的格式（推荐ISO 8601）
2. 边界处理：在getNextPageParam和getPreviousPageParam中处理日期边界情况
3. 性能优化：考虑添加防抖机制处理频繁的日期切换
4. UI反馈：在日期跳转时显示加载状态，提升用户体验

总结

通过RTK Query的infiniteQuery结合缓存更新机制，我们可以实现灵活的基于日期的无限滚动分页。这种方法不仅适用于日期分页，也可以推广到其他需要动态改变分页基准的场景中。关键在于理解RTK Query的缓存机制，并合理利用其提供的工具方法来控制数据获取行为。