How to know when the effect is done within effect in ngrx component store (rxjs flow)?

Question

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 and reuse save effect from another calls.

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: stackblitz

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();
                },
              })
            )
          )
        )
      )
    )
  );

Answer 1

ngrx is able to handle pure side effects (effects that does not manipulate application state). Although you need to dispatch action from within an effect to achieve that, otherwise you can't be sure if it was successful or not.

@Component({
  // component metadata
})
export class MyComponent implements OnInit {
  constructor(
    private readonly actions$: Actions,
  ) {}

  ngOnInit() {
    this.actions$.pipe(
      ofType(someAction),
      takeUntil(this.destroy$), // remember to unsubscribe
    ).subscribe(({payload}) => {
      // show toast
      // close dialog
    });
  }
}