如何在使用 NgRX 管理状态的项目中关闭模态

Question

在状态由 NgRX 管理的项目中使用模态时有什么好的解决方案吗？

我有以下问题：

• 用户单击按钮以创建新项目。
• 模态窗口打开。
• 用户填写表格并点击提交。
• 通过发送 HTTP 请求发送一个动作、效果启动并创建一个项目。
• 现在我需要关闭成功模式。我如何知道何时在模态组件内部或打开此模态的组件内部关闭它？

我现在看到的解决方案之一是从效果返回多个操作，一个将创建的项目添加到商店，第二个关闭模态。为此，我应该在“创建”操作中包含一些模式标识符，以标识在“创建$”效果完成后要关闭的模式，但这会使效果更加复杂。

我不敢相信这个问题没有现成的解决方案。

我将 ngx-bootstrap 用于模态。

更新：似乎要完成这项工作，我需要为应用程序中可用的每个模态存储（状态 + 减速器 + 效果 + 动作）打开/关闭状态。但无论如何，没有现有的解决方案？

Answer 1

我喜欢使用效果来处理整个对话框流程，从打开对话框到保存实体并随后关闭对话框。

@Effect()
openDialog = this.actions.pipe(
  ofType(LoginActionTypes.OpenLoginDialog),
  exhaustMap(_ => {
    let dialogRef = this.dialog.open(LoginDialog);
    return dialogRef.afterClosed();
  }),
  map((result: any) => {
    if (result === undefined) {
      return new CloseDialog();
    }
    return new LoginDialogSuccess(result);
  }),
);

有关详细信息，请参阅开始使用 ngrx/effects。