angular - 如何使用 ngrx-store 和 Angular 5 显示“数据已保存”通知

Question

我使用带有效果的 ngrx-store 4.x 和 Angular 5。

我有一个简单的用例，当数据成功保存在后端时，我需要显示通知。

目前我不确定实现这一目标的最佳方法是什么。我看到两个选项：

1. 商店中的标志和组件中的标志：
   • 在商店中添加“dataSaved”标志。保存数据时，该标志由效果中的动作设置为真。
   • 在角度组件中，添加一个附加标志“已调度”。当按下“保存”按钮时设置该标志。
   • 如果两个标志都为真，则显示“数据已保存”对话框。
2. 商店中的标志和重置操作：
   • 在商店中添加“dataSaved”标志。保存数据时，该标志由效果中的动作设置为真。
   • 在组件的 ngOnInit 方法中重置“dataSaved”标志。
   • 如果“dataSaved”标志为真，则显示“数据已保存”对话框。

我在选项 2 中看到了一个潜在的问题：如果请求需要很长时间，用户可以离开组件并再次返回，如果请求然后完成，保存的通知会突然出现。

这两种选择对我来说都有些过于复杂了——有人能指出我正确的方向吗？

Answer 1

在您成功处理后端服务调用时，您会派发相关的成功操作。

1. 您可以将这些成功操作映射到传递给 reducer 并通过存储选择器传递给通知组件的通知操作。

2. 您可以将该成功 ID 添加到商店状态中。并从您当前实体的 id 过滤的组件中从该商店状态属性中进行选择。像这样的事情在https://youtu.be/vX2vG0o-rpM?t=745中显示

就我个人而言，我会选择选项 1。因为这将通知与实际组件分离，从而可以更轻松地交换、重构通知组件（如果需要）。