🚀 Learning Through Experience: A Tale of NgRx Effects

As developers, we’ve all faced those moments when our code doesn’t behave as expected, and we’re left scratching our heads. One such moment for me involved NgRx Effects – specifically where to place map and catchError when handling service calls.

🔍 Here’s the context:
I was working on an Angular project using NgRx, and I structured my effect like this:

loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.loadUsers),
    mergeMap(() =>
      this.userService.getUsers().pipe(
        map((users) => UserActions.loadUsersSuccess({ users }))
      )
    ),
    catchError((error) => of(UserActions.loadUsersFailure({ error })))
  )
);

It looked perfectly fine, right? But then, something strange happened: the effect stopped processing actions entirely after an error occurred in the service call.

🤔 What went wrong?
The issue was with where I placed the catchError. By putting it in the outer pipe, the error handling wrapped the entire effect pipeline. When an error occurred, the observable terminated, effectively stopping the effect from processing any subsequent actions.

---

The Fix: Using a Nested Pipe

After some digging (and a few headaches), I realized the best practice is to place map and catchError inside the nested pipe for the service. Here's the corrected code:

loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.loadUsers),
    mergeMap(() =>
      this.userService.getUsers().pipe(
        map((users) => UserActions.loadUsersSuccess({ users })),
        catchError((error) => of(UserActions.loadUsersFailure({ error })))
      )
    )
  )
);

Why This Works Better

✅ Scoped Error Handling: The catchError only handles errors from the service call (userService.getUsers()) and doesn’t interfere with the overall effect pipeline.

✅ Pipeline Continuation: The outer pipeline remains intact, ensuring the effect can continue processing future actions even if an error occurs.

✅ Clean Separation: It keeps the service logic encapsulated, making it modular and easier to maintain.

---

Takeaway for Developers

NgRx is powerful, but small mistakes in its implementation can lead to major issues in your application’s state management. This experience taught me:

1. Understand the Observable Lifecycle: Misplaced operators like catchError can have unintended side effects.
2. Follow Best Practices: Localize error handling to the service-level logic.
3. Test Thoroughly: Always verify how your effects behave in different scenarios, especially when errors occur.

---

Have You Faced Similar Challenges?

If you’ve ever struggled with NgRx or faced issues like this, I’d love to hear your experiences! Let’s learn and grow together. 🚀