ngrx: awaiting of confirm or cancel in a custom dialog ngrx: awaiting of confirm or cancel in a custom dialog typescript typescript

ngrx: awaiting of confirm or cancel in a custom dialog


I would say that the dialog doesn't have anything to do with state management.Not everything has to get handled by an effect.

In the case of using angular material I would use the dialog service directly in your ListComponent to display the dialog, and then wait for either the confirm or cancel.

const dialogRef = this.dialog.open(RemoveProjectDialogComponent, {      data: project    });    dialogRef.afterClosed().subscribe(async result => {      // if result is set, it means the user clicked confirm      if (result) {        await this.projectService.remove(this.project.id);        this.snackBar.open('Project removed');        this.router.navigate(['/']);      }    });


The way I usually do that is by creating a deleteItemConfirm and deleteItemCancel actions. Instead of dispatching the deleteItem like initially, I dispatch the deleteItemConfirm and open a confirmation dialog and listen to the answer:

deleteItemConfirm$ = createEffect(() => this.actions$.pipe(    ofType(ItemsListActions.deleteItemConfirm),    map((action) => confirm('Are you sure?')       ? ItemsListActions.deleteItem({id: action.id})       : ItemsListActions.deleteItemCancel()),));

You can easily replace the confirm dialog above with a Material Dialog and subscribe to it.