angularstoredispatchrxjs-observablesngrx-component-store

Dispatch an action after a HTTP request result in a component store effect


There is one component store with an effect that is sending a HTTP request.
Whether the request fails or not, I would like to dispatch an action myAction in the ngrx store.
I thought finalize from rxjs operators would do the trick but it does not: In the case the request succeeds, then the action is not dispatched.
Is there any way I can achieve my goal without doing a tap/catchError with some duplicated code ?

import { ComponentStore } from '@ngrx/component-store';

@Injectable()
export class DashboardStore extends ComponentStore<T> {
/** some code */

readonly disconnect = this.effect<void>(
    pipe(
      mergeMap(() => this.myService.doSomething()),
      tap(() => this.store.dispatch(myAction())),
      catchError((error) => this.store.dispatch(myAction()));
      // finalize(() => this.store.dispatch(myAction()));
    )
  );
}

Solution

  • catchError can return a value in error case, e.g. an empty array when you call a list. In your example I simply use an empty object for demonstration.

    readonly disconnect = this.effect<void>(
        pipe(
          mergeMap(() => this.myService.doSomething().pipe(catchError => of({}))),
          tap(() => this.store.dispatch(myAction())),
        )
      );
    }