NGXS ofActionSuccessful

Question

我有一个订阅ofActionSuccessful的angular组件。当用户单击页面上的按钮时，将调度此操作。用户可能会多次单击此按钮，从而导致此操作的多个调度事件

 this.actions$.pipe(ofActionSuccessful(UpdateCommunicationPreferences)).subscribe(() => {
  console.log('Action Successful');
});

this.store.dispatch(
    new UpdateCommunicationPreferences(this.communicationPreferenceForm.value)
  );

我遇到的问题是ofSuccessful是以累积的方式触发的。换句话说，用户第一次单击该按钮时，将打印一次"Action Successful“。用户第二次单击该按钮时，会打印两次，依此类推。

如果有一种方法可以不为过去的操作获取重复的ofSuccessful事件，有人能帮上忙吗？

感谢任何洞察力。

Answer 1

此程序包的开发考虑到了您的问题：

https://www.npmjs.com/package/@ngxs-labs/actions-executing

@Select(actionsExecuting(UpdateCommunicationPreference)) myActionIsExecuting$：Observable；

您可以在带有异步管道的模板中使用myActionIsExecuting$。您也可以简单地订阅myActionIsExecuting，以熟悉返回的内容。当该特定操作的所有实例完成时，将返回null。

我希望这对你有帮助！

Answer 2

看看这个：https://www.ngxs.io/advanced/cancellation

摘自链接：“如果你有一个异步操作，如果该操作再次被调度，你可能想要取消之前的可观察对象。这对于取消之前的请求很有用，就像在typeahead中一样。”

或者，您可以考虑在触发操作分派之前，当按钮被单击时禁用UI的模式(例如，通过“正在进行”对话框)。完成操作处理后，关闭对话框。

希望这能有所帮助。