使用 react-redux-firebase 库的分页 firestore

Question

我想使用库 react-redux-firebase 构建分页功能： https://react-redux-firebase.com/

此外，我想构建一个动态 orderby 下拉菜单。因此，当我更改 orderby 选项时，startAt 参数会获取当前 orderby 字段并对其进行比较（因为 startAt 与之前的 orderby 相关）。我的问题是，在当前页面中，所有寄存器都保持相同的值，因为 startAt 获得了一个无法在数据库中跟踪的值。

谁能建议一种使用 react-redux-firebase 库通过动态 orderby 选项构建分页的最佳方法？

Answer 1

试试这样的

import { useState, useEffect } from "react";
import { useFirestore, useFirestoreConnect } from "react-redux-firebase";
import { useSelector } from "react-redux";
import { APPOINTMENTS_COLLECTION } from "constants/firebasePaths";
import { RootState } from "store/rootReducer";
import { Appointment } from "model";
import { first, last  } from 'lodash';

export function useAppointmentsList() {
  const [pointer, setPointer] = useState<string | undefined>(undefined) // Current pointer
  const [forwardPointer, setForwardPointer] = useState<string | undefined>(undefined) // Forward pointer
  const [backwardPointers, setBackwardPointers] = useState<string[]>([]) // Backward pointers chain
  const [page, setPage] = useState(0) // current  page
  const [limit, setLimit] = useState(5) // limit

  const firestore = useFirestore();
  // Get auth from redux state
  const auth = useSelector(({ firebase: { auth } }: RootState) => auth);

  useFirestoreConnect([
    {
      collection: APPOINTMENTS_COLLECTION,
      where: ["createdBy", "==", auth.uid],
      orderBy: ["createdAt", "desc"],
      limit: limit + 1,
      startAt: pointer
    },
  ]);
  
  // Get appointments from redux state
  var appointments = useSelector(
    ({ firestore: { ordered } }: RootState) => ordered.appointments
  ) as Appointment[];

  // Set forward pointer
  useEffect(() => {
    if (appointments && appointments.length > limit) { 
      setForwardPointer(last(appointments)?.createdAt)
      appointments.splice(-1,1)
    }
  }, [appointments])

  // add pointer to back chain 
  useEffect(() => {
    if (appointments) {
      const firstItem = first(appointments)
      if (firstItem) { 
        setBackwardPointers((prevState) => { 
          const newState = prevState
          newState[page] = firstItem.createdAt
          return newState
        })
      }
    }
  }, [page, appointments])
  
  const handlePageChange = (event: any, newPage: number) => {
    if (appointments) {
      if (page < newPage && forwardPointer) {
        // Forward
        setPointer(forwardPointer)
      } else if (page > newPage) {
        // Backward
        setPointer(backwardPointers[newPage])
      }
    }
    if (appointments && appointments.length === limit) {
      setPage(newPage);
    } else { 
      console.log("No more record")
    }
  };

  return { appointments, limit, setLimit, page, handlePageChange};
}

然后在组件中使用：

import React from "react";
import { useAppointmentsList } from "./useAppointmentsList";
import { Appointment } from "model";

type AppointmentsListProps = {
  className: string;
};

const AppointmentsList: React.FC<AppointmentsListProps> = () => {
  const {
    appointments,
    limit,
    setLimit,
    page,
    handlePageChange
  } = useAppointmentsList();
  
const handleLimitChange = (event: any) => {
    setLimit(event.target.value);
  };
  return (
    <div>
     ...
              <TablePagination
                component="div"
                count={-1}
                onChangePage={handlePageChange}
                onChangeRowsPerPage={handleLimitChange}
                page={page}
                rowsPerPage={limit}
                rowsPerPageOptions={[5, 10, 25]}
              />
            </Card>
    </div>
  );
};
export default AppointmentsList;