Ngrx 一次分派一个动作多次

Posted 2023-02-19

【中文标题】Ngrx 一次分派一个动作多次

【英文标题】：Ngrx dispatch one action multiple times at once

【发布时间】：2017-10-11 17:20:19

【问题描述】：

我的应用有 3 个下载按钮 每次单击按钮都会调度 DownloadFileAction(payload=fileId) 一个 Effect 会一直监听 Download_File_Action 类型

@effect()
download_attachment$: Observable = this.actions$
.ofType(FileActions.ActionTypes.DOWNLOAD_ATTACHMENT)
.map(toPayload)
.switchMap( attachment => 
return this.service.downloadAttachment(attachment.link) //absolute link
.map( (data) => 
this.service.saveAttachment(data); //save file locally
return new FileActions.DownloadAttachmentSuccessAction(attachment);
)
.catch(error => 
//debugger;
console.log(error);
);

)

如果同时点击超过 1 个按钮，则会分派 2 个 DownloadFileAction 动作

但是，download_attachment$ 效果只监听先下载的一个，然后返回 DownloadAttachmentSuccessAction，所以其他的下载文件不会完成

有什么解决方案或解决方法吗？ 非常感谢您的想法

【问题讨论】：

将switchMap 替换为mergeMap。

感谢@cartant，mergeMap 完美运行

【参考方案1】：

正如评论中提到的@cartant，将switchMap 替换为mergeMap。

不同之处在于，switchMap 将在每次父可观察对象触发时切换 上下文，而mergeMap 将继续侦听父可观察对象并合并 或组合结果。

切换地图

本质上，switchMap 在父 observable 发出新值时取消订阅父 observable 的第一个流。

在弹珠图中，您可以看到何时发出3，然后发出5，最终输出不包括3 个30s，因为当发出5 时，它切换了 上下文和值被删除。

合并地图

MergeMap 将合并从父 observable 发出的所有值。

在mergeMap 的弹珠图中，您可以看到父可观察对象发出的每个值都发出了所有值。即，所有30s 都会被发出，即使最后一个值是在5 从父级发出之后进入的。

希望这有助于更好地说明它。

【讨论】：

感谢@TylerJenning 的回答和清晰的解释。