Multiple service calls from an NgRx Effect

Tim Deschryver - Feb 3 '20 -

- Dev Community

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

Multiple service calls from an Effect

Name: Multiple service calls from an NgRx Effect
Rating: 4.5 (9815 reviews)
Author: timdeschryver

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)),
            ),
          ),
        ),
      ),
    ),
  ),
)

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