Problems using @ngrx/effects and firebase together. Success action is triggered instantly

Question

I'm using Firebase with AngularFire and ngrx/effects (latest versions of everything).

Look at the following effect:

  createGroupRequest$ = createEffect(() =>
    this.actions$.pipe(
      ofType(CreateGroupActions.createGroupRequest),
      switchMap(action =>
        of(this.afs.collection<Group>('groups').add(action.group))
          .pipe(
            map(() => CreateGroupActions.createGroupSuccess()), // This is fired instantly, NOT when the request is done
            catchError(error => of(CreateGroupActions.createGroupFailure(error)))
          ))
    )
  );

  constructor(
    private actions$: Actions,
    private store: Store<AppState>,
    private afs: AngularFirestore,
  ) {
  }

My main problem is that my success action is triggered instantly, and NOT when the add() request is done. I'm pretty sure it's because the collection.add() function of firebase returns a promise and not an observable.

I tried wrapping it with of() to make it an Observable but it didn't help. Any ideas?

Answer 1

I've solved it.

Changing of() to from() made it work.

When I read up on those operators in the official docs I noticed that of() doesn't actually turn the argument into an Observable, while from() does exactly that.