CODEWITHSUNDEEP
angularngrxcomponent-store
Abel De la Fuente
Abel De la Fuente

Reputation: 104

What is the need of nesting pipes in ngrx effects?

I'm having a bit of a hard time trying to figure out why we are unsing nested pipes in ngrx effects since I thought the main purpose of pipes is to avoid nesting...

In the ngrx documentation you find

readonly getMovie = this.effect((movieId$: Observable<string>) => {
    return movieId$.pipe(
      // 👇 Handle race condition with the proper choice of the flattening operator.
      switchMap((id) => this.moviesService.fetchMovie(id).pipe(
        //👇 Act on the result within inner pipe.
        tap({
          next: (movie) => this.addMovie(movie),
          error: (e) => this.logError(e),
        }),
        // 👇 Handle potential error within inner pipe.
        catchError(() => EMPTY),
      )),
    );
  });

And I find no difference when I write it without the inner pipe

readonly getMovie = this.effect((movieId$: Observable<string>) => {
    return movieId$.pipe(
      switchMap((id) => this.moviesService.fetchMovie(id)),
      tap({
        next: (movie) => this.addMovie(movie),
        error: (e) => this.logError(e),
      }),
      catchError(() => EMPTY))
    );
  });

I have been trying to find information about why is that but no luck yet...

Upvotes: 2

Views: 507

Answers (1)

Abel De la Fuente
Abel De la Fuente

Reputation: 104

So I finally found the answer:

catchError - catches the error and substitutes observable with whatever is provided in the callback - in this case EMPTY observable. So it will no longer be listening for the movieId$ stream. That's why we handle the error in the inner Observable BEFORE it's flattened into the outer one.

So, the result is not the same - try pushing another value into getMovie after the error

Upvotes: 4

Related Questions