angular - ngrx:在自定义对话框中等待确认或取消

Question

ngrx， Angular 7

我需要从列表中删除项目，但在此之前我应该​​显示一个对话框进行确认。我认为对我来说最好的方法是通过副作用 显示对话。我需要在发送删除操作时出现，在副作用中捕获它打开一个对话框组件并返回某种 promise (确认或取消)。做这件事我有点困惑，所以我需要你的帮助，亲爱的 Stackoverflow。

list.component.ts

export class ListComponent {

    list: List;

    constructor(store: Store<fromStore.State>) { }

    deleteItem(itemId: string) {
        this.store.dispatch(new fromStore.DeleteItem);
    }
}

confirm-dialog.component.ts

export class ConfirmDialogComponent {

    constructor() { }

    confirm() {
        // return something to confirm deleting
    }

    cancel() {
        // return something to cancel deleting
    }
}

list.actions.ts

export enum ListActionTypes {
    DeleteItem = '[List] Delete Item',
    DeleteItemSuccess = '[List] Delete Item Success',
    DeleteItemFailure = '[List] Delete Item Failure',

    SetDialogVisibility = '[List] Set Dialog Visibility'
}

export class DeleteItem implements Action {
    readonly type = ListActionTypes.DeleteItem;

    constructor(public payload: string) { } // item id
}

export class DeleteItemSuccess implements Action {
    readonly type = ListActionTypes.DeleteItemSuccess;

    constructor(public payload: string) { }
}

export class DeleteItemFailure implements Action {
    readonly type = ListActionTypes.DeleteItemFailure;
}

export class SetDialogVisibility implements Action {
    readonly type = ListActionTypes.SetDialogVisibility;

    constructor(public payload: boolean) { } // depends on this value I show or hide dialog
}

export type VoyagePageActions = CreateVoyage
    | DeleteItem
    | DeleteItemSuccess
    | DeleteItemFailure
    | SetDialogVisibility;

list.effects.ts

    export class ListEffects {

    constructor(
        private actions$: Actions,
        private store: Store<fromStore.State>
    ) { }

    @Effect() DeleteItem$: Observable<Action> = this.actions$
        .pipe(
            ofType(ListActionTypes.DeleteItem),
            map((action: DeleteItem) => action.payload),
            // show dialog
            // wait for answer
            // send http request to delete item
            // delete item from store
        );
}

Answer 1

我会说对话框与状态管理没有任何关系。并非所有事情都必须由效果处理。

在使用 Angular Material 的情况下，我会直接在您的 ListComponent 中使用对话框服务来显示对话框，然后等待确认或取消。

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(['/']);
      }
    });