使用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;