NGRX: How to call same service multiple time with different payload from inside effect

Question

I don't want to use forkJoin inside effect

In my effect, I am getting one array of id's and with the help of those ids, I want to call service multiple times. and every time when I get a response I want to dispatch an action to update my store

@Injectable()
export class MovieEffects {
  loadMovies$ = createEffect(() =>
    this.actions$.pipe(
      ofType('[Movies Page] Load Movies'),

     //here i am getting one array object via action,  e.g. = [{id: 1},{id: 2},{id: 3},{id: 4} ]
     //and here i want to call same service 4 time as per array length
     // every time when get response i want to dispatch one action with response payload

      mergeMap((action) => this.moviesService.getAll()
        .pipe(
          map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
          catchError(() => of({ type: '[Movies API] Movies Loaded Error' }))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private moviesService: MoviesService
  ) {}
}

Answer 1

Just do a for each on your array of ids and call your service in that loop, creating and subscribing to the new observables and dispatching actions when they are done.

    loadMovies$ = createEffect(() =>
      this.actions$.pipe(
        ofType('[Movies Page] Load Movies'),
        tap((action) => {
         action.payload.forEach(id => 
            this.movieService.getMovie(id).pipe(
                map(movie => this.store.dispatch(new fromStore.GetMovieSuccess(movie)),
                catchError(() => this.store.dispatch(new fromStore.GetMovieFail(id)))
              .subscribe();
        } 
       )
     ), {dispatch: false}
    );

I personally almost always use {dispatch: false} for my effects and dispatch the events manually as I don't like always having them at the end of the effect as well as often having some other issues with the syntax.