使用 react-redux 进行 Firestore 分页

Question

I try to add pagination using firebase and react redux-toolkit. I get the logic but having trouble using it with redux.

At first I wanted to set lastDoc in redux state but I got error since it is an object.

Then I changed the way and started to keep id of last document in the state. But then I can't get the firebase doc itself

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

is not same with

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

I appreciate any help how to solve this.

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 only returns the doc reference. You need to get the actual doc itself.

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

And you should use await instead of then-catch for more readble code.

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 {}
        }
    }
);

Edit: You can also save the lastDoc to redux then reference it later to avoid additional workload fetching for the 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 {}
        }
    }
);