DEV Community

loading...

Multiple service calls from an NgRx Effect

Tim Deschryver
πŸ‘Ÿ Runner πŸ‘¨β€πŸ’» OSS enthusiast - NgRx, Angular Testing Library, MSW ✍ Blogger
Originally published at timdeschryver.dev ・1 min read

Follow me on Twitter at @tim_deschryver | Originally published on timdeschryver.dev.


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)),
            ),
          ),
        ),
      ),
    ),
  ),
)
Enter fullscreen mode Exit fullscreen mode

Follow me on Twitter at @tim_deschryver | Originally published on timdeschryver.dev.

Discussion (0)