Tim Deschryver

Multiple service calls from an Effect

Tim Deschryver
Tim Deschryver
timdeschryver.dev

A snippet on how to invoke multiple service calls within a single NgRx Effect.

Multiple service calls from an Effect

Use case

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

Solution

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




 
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!

Enjoying the blog?

Support my work

If you enjoyed this post and found it useful, consider supporting my work. It helps me keep creating and sharing content like this. Thank you!

Buy me a coffee Donate with PayPal