带react-redux的Firestore分页

Question

const lastDocRef = firestoreDB.doc(`catalog/${publishedBooks.lastDocId}`)

const lastDoc = snap.docs[snap.docs.length-1];

我很感激任何帮助如何解决这个问题。

import { createSlice, createAsyncThunk, createEntityAdapter } from '@reduxjs/toolkit';
import firebaseService from 'app/services/firebaseService';

const firestoreDB = firebaseService.firestoreDB;

export const getPublishedBooks = createAsyncThunk('adminApp/publishedBooks/getPublishedBooks',
    async (params, { dispatch, getState }) => {
        const promise = firestoreDB
            .collection('catalog')
            .orderBy('lastPublish', 'desc')
            .limit(10)
            .get()
            .then(snap => {
                const lastDoc = snap.docs[snap.docs.length-1];
                dispatch(setLastDocId(lastDoc.id));
                let books = [];
                snap.forEach(bookDoc => {
                    const id = bookDoc.id;
                    const data = bookDoc.data();
                    const lastPublish = data.lastPublish.toDate().toISOString();
                    books.push({ ...data, id, lastPublish });
                });
                return books;
            })
            .catch(error => {
                return {}
            });

        const result = await promise;
        return result;
    }
);

export const getPublishedBooksNext = createAsyncThunk('adminApp/publishedBooks/getPublishedBooksNext',
    async (params, { dispatch, getState }) => {
        const { publishedBooks } = getState().adminApp;

        const lastDocRef = firestoreDB.doc(`catalog/${publishedBooks.lastDocId}`)

        const promise = firestoreDB
            .collection('catalog')
            .orderBy('lastPublish', 'desc')
            .startAfter(lastDocRef)
            .limit(10)
            .get()
            .then(snap => {
                const lastDoc = snap.docs[snap.docs.length-1];
                dispatch(setLastDocId(lastDoc.id));
                let books = [];
                snap.forEach(bookDoc => {
                    const id = bookDoc.id;
                    const data = bookDoc.data();
                    const lastPublish = data.lastPublish.toDate().toISOString();
                    books.push({ ...data, id, lastPublish });
                });
                return books;
            })
            .catch(error => {
                return {}
            });

        const result = await promise;
        return result;
    }
);

const publishedBooksAdapter = createEntityAdapter({});
const initialState = publishedBooksAdapter.getInitialState({
    lastDocId: null
});

export const {
    selectAll: selectPublishedBooks,
    selectById: selectPublishedBookById,
    selectTotal: selectPublishedBooksTotal
} = publishedBooksAdapter.getSelectors(state => state.adminApp.publishedBooks);

const publishedBooksSlice = createSlice({
    name: 'adminApp/publishedBooks',
    initialState,
    reducers: {
        resetPublishedBooks: (state, action) => initialState,
        setLastDocId: {
            prepare: doc => {
                const payload = doc
                return { payload };
            },
            reducer: (state, action) => {
                state.lastDocId = action.payload;
            }
        },
        resetLastDocId: {
            prepare: () => {
                const payload = null
                return { payload };
            },
            reducer: (state, action) => {
                state.lastDocId = action.payload;
            }
        },
    },
    extraReducers: {
        [getPublishedBooks.fulfilled]: publishedBooksAdapter.setAll,
        [getPublishedBooksNext.fulfilled]: publishedBooksAdapter.upsertMany
    }
});

export const { resetPublishedBooks, setLastDocId, resetLastDocId } = publishedBooksSlice.actions;

export default publishedBooksSlice.reducer;

Answer 1

lastdocref只返回文档引用。你需要得到真正的医生本身。

const lastDocRef = await firestoreDB.doc(`catalog/${publishedBooks.lastDocId}`).get();

您应该使用await而不是then-catch来获得更易读的代码。

export const getPublishedBooksNext = createAsyncThunk('adminApp/publishedBooks/getPublishedBooksNext',
    async (params, { dispatch, getState }) => {
        const { publishedBooks } = getState().adminApp;

        try {
            const lastDocRef = await firestoreDB.doc(`catalog/${publishedBooks.lastDocId}`).get();

            const snap = await firestoreDB
                .collection('catalog')
                .orderBy('lastPublish', 'desc')
                .startAfter(lastDocRef)
                .limit(10)
                .get()
            
            const lastDoc = snap.docs[snap.docs.length-1];
            let books = [];
            dispatch(setLastDocId(lastDoc.id));
            snap.forEach(bookDoc => {
                const id = bookDoc.id;
                const data = bookDoc.data();
                const lastPublish = data.lastPublish.toDate().toISOString();
                books.push({ ...data, id, lastPublish });
            });

            return books;
        } catch (error) {
            return {}
        }
    }
);

编辑：您还可以保存lastdoc以redux，然后在以后引用它，以避免为lastdocref获取额外的工作负载。

export const getPublishedBooksNext = createAsyncThunk('adminApp/publishedBooks/getPublishedBooksNext',
    async (params, { dispatch, getState }) => {
        const { lastDocRef } = getState().adminApp; // get saved lastDoc 
    
        try {
            const snap = await firestoreDB
                .collection('catalog')
                .orderBy('lastPublish', 'desc')
                .startAfter(lastDocRef) // use it here. 
                .limit(10)
                .get()
            
            const lastDoc = snap.docs[snap.docs.length-1];
            let books = [];
            // dispatch(setLastDocId(lastDoc.id)); // instead of saving the doc id 
            dispatch(setLastDoc(lastDoc)); // save the last document instead 
            
            snap.forEach(bookDoc => {
                const id = bookDoc.id;
                const data = bookDoc.data();
                const lastPublish = data.lastPublish.toDate().toISOString();
                books.push({ ...data, id, lastPublish });
            });

            return books;
        } catch (error) {
            return {}
        }
    }
);