DEV Community 👩‍💻👨‍💻

Tim Deschryver
Tim Deschryver

Posted on • Originally published at timdeschryver.dev

Multiple service calls from an NgRx Effect

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.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.