Multiple service calls from an Effect

Modified October 12, 2022

Tim Deschryver

timdeschryver.dev

Multiple service calls from an Effect link

Use case link

An action to fetch multiple entities at once, but the service has only an endpoint to fetch one entity at a time.

Solution link

Use the RxJS merge operator to flatten all request streams and concurrently emit all values to a single output stream.

 content_paste
refresh$ = createEffect(() =>
  this.actions$.pipe(
    ofType(CustomerActions.refresh),
    exhaustMap(({ customerIds }) =>
      merge(
        ...ids.map((id) =>
          this.customersService.getCustomer(id).pipe(
            map(CustomerActions.getCustomerSuccess),
            catchError((err) => of(CustomerActions.getCustomerFailed(id, err.message))),
          ),
        ),
      ),
    ),
  ),
);

Feel free to update this blog post on GitHub, thanks in advance!

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Share this post