How to know when the effect is done within effect in ngrx component store (rxjs flow)? #3409
Description
I'm currently implementing a feature that "open a dialog"(effect), after the dialog open the user hit save and then I want to close the dialog.
I made fake dialog and flow for the example.
I also split the flow into two effects: openDialogEffect and saveEffect to avoid "operator-hell" and code more readable.
this works fine. until I want to close the dialog AFTER the save is successful.
The problem is how to "hook" into the pipeline of saveEffect?
I reproduce the problem here:
https://stackblitz.com/edit/angular-ivy-2oxbby?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.service.ts,src%2Fapp%2Fapp.module.ts
readonly openDialogEffect = this.effect(($: Observable<any>) =>
$.pipe(
exhaustMap((dialogRef) =>
dialogRef.open().pipe(
tap({
next: () => {
this.saveEffect(); // <----- after that need to close the dialog... but how??
// then: dialogRef.close();
},
})
)
)
)
);
readonly saveEffect = this.effect(($) =>
$.pipe(
exhaustMap(() =>
this.api.save().pipe(
switchMap((res) =>
this.api.updateFoo(res).pipe(
tap({
next: () => {
console.log('after save');
this.toast.success();
},
error: () => {
console.log('in error');
this.toast.error();
},
})
)
)
)
)
)
);