在 Angular/Ngrx 中的操作之间传递负载

Question

我是 Angular/Ngrx 世界的新手，我在下面的应用程序中使用它。我会尽力解释这个问题。

我们有一个包含 2 个组件的主页 - 配置页面和确认警报（最初是隐藏的）。用户可以更改配置，页面的状态存储在 MyPageConfig 对象中。单击此页面上的“保存”时，将触发一个操作并显示确认警报。单击警报上的“确认”后，应通过调用后端 API.

来保存数据

我在主页的 HTML 中有这个：

<ng-template #whenLoaded> 
  <configure-page [doSubmitForm]="submitForm"></configure-page>        
  <confirm-delete [remove-config]="removeConfig$" 
            (onCancel)="handleCancel()" (onConfirm)="handleConfirm()"></confirm-delete>            
</ng-template>

removeConfig$ 是我正在收听的布尔 Observable，但目前没有使用。

我在主页的 TS 文件中有以下 2 个处理程序：

handleCancelRemove() {
    this.store.dispatch(new actions.CancelRemoval());
}

handleConfirmRemove() {
    this.store.dispatch(new actions.ConfirmRemoval());    
}

请注意，没有负载被发送到 handleConfirmRemove，因为此页面本身不知道配置更改。

在配置页面的 doSubmitForm 处理程序中，我将确认消息对话框显示为：

if (some condition) {
    this.store.dispatch(new actions.ShowConfirmationDialog());
    // Here we have the payload and can use it somehow? 
    // But the "confirm" button click is handled in the TS of the main page.
}

显示对话框。但我坚持如何传递配置有效负载来持久化它。我可以写一个 effect，但为了做到这一点，我需要 ConfirmRemoval() 操作来传递恰好在主页上的有效负载。

在我看来有 2 个可能的解决方案，但我不知道如何解决它们：

将有效负载从子（配置）页面传递到父（主）页面，它将与确认按钮单击的操作处理程序一起提交。
让父（主）页面了解配置更改（即表单状态），并直接使用确认按钮单击的操作处理程序创建并提交有效负载。

任何关于如何实现这一点的建议都将不胜感激。

Answer 1

这是非常常见的用例，我实际上会听取确认对话框的结果并采取相应的行动。事实上，您通过单个事件总线执行所有操作会混淆逻辑，但这是可行的。

if (some condition) {
  const payload=wegotthepayload.
  this.showDialog().subscribe(resultOfDialog=>{
      if(resultOfDialog=='okClicked'){
         this.saveThePayloadSomehow(payload);
      }else {
         do something else or ignore.
       }
   }))
}

其中 this.showDialog() 是打开对话框的方法，returns Observable<ResultOfDialog>

这可以通过例如在您的事件总线上发出 Ok/Cancel 事件并仅过滤事件 (pipe + filter)

来完成

可能就像

showDialog(){
        this.store.dispatch(new actions.ShowConfirmationDialog());
       return this.store.yourEventsStream().pipe(filter(e=>e=='okClicked' || e=='cancelClicked'),take(1));

显然您的对话框必须相应地发出适当的事件。

}

在 Angular/Ngrx 中的操作之间传递负载

Passing payload between actions in Angular/Ngrx

typescript

ngrx

angular