reactjs - 如何使用 react、redux 和 firestore 进行分页

Question

我很困惑如何构建无限滚动的代码。如果有人知道如何逐页（如谷歌）实现分页，那也是可以接受的。我看过很多关于无限滚动分页的教程，但没有一个使用 redux。

这是我渲染 Firestore 文档的 Layout 组件。

 const Layout = (props) => {
  const classes = useStyles();
  const [checked, setChecked] = React.useState(false);
  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  React.useEffect(async () => {
    await props.fetchPrograms("all", "mostPopular");
  }, []);

  const renderCards = () => {
    if (!props.programs.programs) {
      return [1, 2, 3, 4, 5, 6].map((item) => {
        return <Skeleton key={item} />;
      });
    } else {
      if (props.programs.programs.length > 0) {
        return props.programs.programs.map((program, index) => {
          return <Card key={index} program={program} />;
        });
      } else {
        return (
          <div style={{ display: "flex" }}>
            <NoProgramFound />
          </div>
        );
      }
    }
  };

  const breakpoints = {
    default: 3,
    950: 2,
    620: 1,
  };

  const renderSort = () => {
    if (!props.programs.programs) {
      return null;
    }
    return <GroupedSelect />;
  };

  return (
    <React.Fragment>
    

      <Masonry
        breakpointCols={breakpoints}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        {renderCards()}
      </Masonry>
    </React.Fragment>
  );
};
const mapStateToProps = (state) => {
  return {
    programs: state.programs,
  };
};



export default connect(mapStateToProps, { fetchPrograms })(Layout);

用于从 firestore 获取数据的动作创建者文件是

export const fetchPrograms =
  (byCategory, byProgram, bool) => async (dispatch) => {
    try {
      const category = byCategory[0].toLowerCase() + byCategory.slice(1);

      let docs = null;

      if (category === "all") {
        if (byProgram === "mostPopular") {
          // ALL AND POPULAR
          docs = await db
            .collection("programs")
            .orderBy("registrationCount", "desc")
            .get();
        } else if (byProgram === "mostRecent") {
          // ALL AND RECENT
          docs = await db
            .collection("programs")
            .orderBy("createdAt", "desc")

            .get();
        }
      } else {
        if (byProgram === "mostPopular") {
          // CATEGORY AND MOST POPULAR
          docs = await db
            .collection("programs")
            .orderBy("registrationCount", "desc")
            .where("category", "==", category)
            .get();
        } else if (byProgram === "mostRecent") {
          docs = await db
            .collection("programs")
            .orderBy("createdAt", "desc")
            .where("category", "==", category)
            .get();
        }
      }
      await docs.forEach((item) => {
        itemArray.push(item.data());
      });
      await dispatch({ type: FETCH_PROGRAMS, payload: itemArray });
      history.push("/");
    } catch (error) {
      console.log(error.message);
      history.push("/error");
    }
  };

标签： reactjsfirebasereduxgoogle-cloud-firestorepagination