first time using component store as a simple state management in an angular project.
I'm probably not fully understanding how the effect() of the componentStore works.
When the user wants to delete an item, I open a dialog, and upon confirmation I invoke my store method:
public delete(entity: any): void {
const dialogRef = this._dialog.open(
// ....
);
dialogRef.afterClosed().subscribe(result => {
if (result && result === true) {
this.myStore.delete(entity.id);
}
});
}
and this is myStore delete effect:
public readonly delete = this.effect((id$: Observable<string>) => {
return id$.pipe(
switchMap(id => this.myApiService.delete(id)),
catchError(err => of(err as string)),
tap(id => {
this.removeLocalItem(id);
}),
);
});
the final method in my api service:
public delete(id: string): Promise<string> {
const response = firstValueFrom(
this._httpClient.delete<void>(`my endpoint`).pipe(
map(() => id),
catchError(error => {
console.log(error);
return '';
}),
),
);
return response;
}
so basically if I delete (successfull api call) multiple items from a list, it all goes smoothly.
But as soon as one item delete call fails because of a backend error response,
it logs correctly the error, but now in the app, whatever I try to delete, nothing happens, is seems that the effect is not invoked anymore.
If I put a console.log in the dialog, where the store component effect is called, the log prints correctly, it's just then it looks nothing happens and the delete() is not called.
I can assume that this has to do with these effect() being observables, so something I'm not understanding there.
Why after a successful delete, it keeps working, but as soon as one fails, no other try will call the method?
I tried looking into the documentation, but the component store one didn't answer my doubts
EDIT: after some testing, I see that if my api method, in the ApiService, instead of using firstValueFrom/lastValueFrom and make the method a promise, if I just turn it into an observable, and return the http call, then everything works even when errors occur.
I would like to understand what should I change to make it work with a promise as well, I assume I'm doing using a wrong operator somewhere