Angular - NGXS - subscribing to dispatch observable causes issues with change detection?

90 Views Asked by At

My project is using Angular 17 with NGXS. I have noticed a weird behavior related to error handling and change detection. When dispatching an action and subscribing to the dispatch observable, if that action throws an error, then it seems that there is a problem with a change detection. Stackblitz demonstrating the behavior:

https://stackblitz.com/edit/stackblitz-starters-gsycbr?file=src%2Fapp%2Ftest%2Fcomponents%2Fcolor%2Fcolor.component.ts

The app handles errors as follows: Global error handler uses ErrorService to handle errors, the service has an observable which emits new error values, an error message component subscribes to that observable and displays the error.

However, when the dispatch observable is subscribed to in a component:

this.store
      .dispatch(new CreateColor(this.selectedColor))
      //this subscription causes the weird behavior
      .pipe(tap(() => console.log('Dispatch observable')))
      .subscribe();

it seems that error message component does not display the error correctly - no view update. The update happens only when there is another event, for example when a radio button is pressed.

When the dispatch observable is NOT subscribed to:

this.store
      .dispatch(new CreateColor(this.selectedColor));

the error component updates its view without issue.

Any help with explaining this behavior would be greatly appreciated

0

There are 0 best solutions below