Error in epic with redux-observable and rxjs

Question

I'm trying to create an epic that fetches data from firestore using rxfire. On every emission of a value, an action needs to be dispatched. My codes looks like this:

const fetchMenu = (action$, _state$) => {
  return action$.pipe(
    ofType(Types.FETCH_MENU_REQUESTED),
    flatMap((async ({ resID }) => {
      const firestore = firebase.firestore();
      const menuRef = firestore.collection('menus').where('resID', '==', resID);
      return collectionData(menuRef, 'id')
      .pipe(
        map(val => {
          return Creators.fetchMenuSuccess(val);
        })
      )
    }
    )),
  );
};

However, I'm getting the error Actions must be plain objects. Use custom middleware for async actions.

As far as I understand, the pipe operator is wrapping my value in an observable and that's why I'm getting the error, but I'm not sure what to do so that it only returns the action. I'm still a bit new to rxjs so any help would be very appreciated.

score 1 · Accepted Answer · answered Sep 13 '20 at 20:54

Your flatMap callback is async, which means it's not returning an observable that emits the fetchMenuSuccess action, it's returning a promise that resolves to the observable. Rx will unwrap the promise automatically, which means that the observable returned from this epic emits observables instead of subscribing to them and emitting their own values.

Removing the async keyword should fix it.

Error in epic with redux-observable and rxjs

1 Answers1