精通RTK Query无限滚动：优化API调用与停止策略

// src/services/api.js (或者你的 RTK Query service 文件)
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const imageApi = createApi({
  reducerPath: 'imageApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://your-api.com/' }), // 替换为你的API地址
  endpoints: (builder) => ({
    getImages: builder.query({
      query: (page = 1, limit = 10) => `images?page=${page}&limit=${limit}`,
      // transformResponse 用于在数据到达组件前进行预处理
      transformResponse: (response) => {
        // 假设API响应结构为 { data: [...images], pagination: { currentPage, totalPages, hasNextPage } }
        return {
          images: response.data,
          hasMore: response.pagination.hasNextPage, // 从API响应中获取是否有更多数据
        };
      },
    }),
  }),
});

export const { useLazyGetImagesQuery } = imageApi;

import React, { useState, useEffect, useCallback } from 'react';
import { useLazyGetImagesQuery } from './services/api'; // 导入你的API Hook

function ImageGallery() {
  // useLazyGetImagesQuery 返回一个触发函数和查询状态
  const [getImages, { data: imagesResponse, isLoading, isFetching, error }] = useLazyGetImagesQuery();

  // 存储所有已加载的图片数据
  const [allImages, setAllImages] = useState([]);
  // 当前请求的页码
  const [pageNumber, setPageNumber] = useState(1);
  // 标识是否还有更多数据可以加载
  const [hasMore, setHasMore] = useState(true); // 初始假设有更多数据

  // 1. 触发API请求的Effect
  useEffect(() => {
    // 只有当hasMore为true时才发起请求，避免无意义的API调用
    if (hasMore) {
      getImages(pageNumber);
    }
  }, [pageNumber, hasMore, getImages]); // 依赖项包含getImages以避免linter警告

  // 2. 处理API响应并更新数据和hasMore状态的Effect
  useEffect(() => {
    if (imagesResponse && imagesResponse.images) {
      setAllImages((prev) => {
        const newImages = imagesResponse.images;
        // 使用Set来确保图片唯一性，防止API返回重复数据
        return Array.from(new Set([...prev, ...newImages]));
      });
      // 根据API响应更新hasMore状态
      setHasMore(imagesResponse.hasMore);
    }
  }, [imagesResponse]); // 仅当imagesResponse变化时执行

  // 3. 滚动事件处理函数
  // 使用 useCallback 优化，防止每次组件渲染都重新创建函数，导致 useEffect 频繁重新注册事件监听器
  const handleScroll = useCallback(() => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    // 判断是否滚动到页面底部（例如，距离底部10%的位置）
    // 并且当前没有正在进行的数据请求 (isFetching)
    // 并且还有更多数据可以加载 (hasMore)
    if (
      scrollTop + clientHeight >= scrollHeight * 0.9 && // 90% 阈值，可根据需要调整
      !isFetching && // 使用 isFetching 更准确地判断当前是否有请求在进行
      hasMore
    ) {
      setPageNumber((prevPageNumber) => prevPageNumber + 1);
    }
  }, [isFetching, hasMore]); // 依赖项：isFetching 和 hasMore

  // 4. 注册和清理滚动事件监听器
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]); // 依赖项：handleScroll

  // 渲染部分
  return (
    <div>
      <h1>图片画廊</h1>
      {error && <p>加载失败: {error.message}</p>} {/* 错误处理 */}

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '16px' }}>
        {allImages.map((image) => (
          <img key={image.id} src={image.url} alt={image.title} style={{ width: '100%', height: '200px', objectFit: 'cover' }} />
        ))}
      </div>

      {(isLoading || isFetching) && hasMore && <p>加载中...</p>} {/* 显示加载状态 */}
      {!hasMore && allImages.length > 0 && <p>所有图片已加载完毕。</p>} {/* 显示加载完成提示 */}
    </div>
  );
}

export default ImageGallery;