使用 redux observable 和 firebase 执行异步操作的正确方法是什么？

Question

so I have this epic

export const listenToCountryVisitsEpic = (action$, store) => {
    return action$.pipe(
        ofType('UPDATE_TRIP_DETAILS'),
        mergeMap((action) => {
            const userId = store.value.user.id
            const { country, newDetails } = action
            const { people, places } = details
            const scheme = {
                people,
                places,
            }

            firebase.database().ref(`users/${userId}/path`).update(scheme)

            return mergeMap((response) => {
                const payload = { ...JSON.parse(response.request.body), currentDetails: action.currentDetails }
                return [updatedCountrySuccess(payload)]
            })
        }),
    )
}

what I want to do is make the request to firebase and then if successful update redux which in turn will update react. if not successful then catch it

this is correctly posting to firebase but I need to catch errors correctly. I don't want to fire this: updatedCountrySuccess until I know it's a success or failure in firebase

can I use async/await for this?

Answer 1

You can use from() to turn Promise into Observable and then catchError to replace the error with whatever you want.

import { from } from 'rxjs';
import { catchError } from 'rxjs/operators';

...

return action$.pipe(
    ofType('UPDATE_TRIP_DETAILS'),
    mergeMap((action) => {
        const userId = store.value.user.id
        const { country, newDetails } = action
        const { people, places } = details
        const scheme = {
            people,
            places,
        }

        return from(firebase.database().ref(`users/${userId}/path`).update(scheme))
            .pipe(
                // `mergeMap` will handle only `next` notifications
                mergeMap((response) => {
                    const payload = ...
                    return [updatedCountrySuccess(payload)]
                }),
                catchError(error => of(errorAction)),
            );
    }),
)