Issue with return types in NgRx Effect

Question

Using NgRX effects version 8.5.1 - with the new create functions I am having an issue with my observable stream from the effect.

With this code, I get an error in the console: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

loadAllSeasons$ = createEffect(() => this.actions$.pipe(
  ofType(SeasonActions.loadSeasons),
  withLatestFrom(this.store.pipe(select(selectIfAllSeasonsLoaded))),
  filter(([action, allSeasonsLoaded]) => !allSeasonsLoaded),
  mergeMap(() => this.seasonService.getSeasons()),
  map(seasons => SeasonActions.loadSeasonsSuccess({seasons}))
));

I figured the issue could be to do with the dispatching of the loadSeasonsSuccess action not returning the correct type, so I modified that line to this:

map(seasons => this.store.dispatch(loadSeasonsSuccess({seasons})))

However I now get a compile error Type 'Observable<Void>' is not assignable to type 'Observable<Action>...' and the same console error.

If I switch the filter to allSeasonsLoaded rather than !allSeasonsLoaded, the code runs fine, but obviously no seasons are fetched.

Answer 1

You should use the map operator on the inner observable:

loadAllSeasons$ = createEffect(() => this.actions$.pipe(
  ofType(SeasonActions.loadSeasons),
  withLatestFrom(this.store.pipe(select(selectIfAllSeasonsLoaded))),
  filter(([action, allSeasonsLoaded]) => !allSeasonsLoaded),
  mergeMap(() => 
    this.seasonService.getSeasons().pipe(
      map(seasons => SeasonActions.loadSeasonsSuccess({seasons}))
    )
  )),
));