Angular - component store, why my effect can't be triggered after an http error?

107 Views Asked by At

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

0

There are 0 best solutions below