如何使用ngrx监听成功操作

Question

我有一个使用 ngrx Store 和 Effects 的 Angular2 应用程序。一切都很好，但是我不确定处理知道服务调用操作何时成功完成以便使用成功警报或类似内容更新视图的最佳方式。

例如，这是我在 CreateUser 视图上的流程。

1. View 将 Action 调度到 Effect
2. 效果调用服务来创建用户
3. Service 将成功结果返回给 Effect（在我们的例子中是一个更新的用户对象）
4. Effect 通过 Reducer 通过新状态更新 Store。

现在我想向用户表明操作已成功完成，但我不知道处理此问题的最佳方法。

我是否在 CreateUser 组件上为 store 设置了一个 Observable 以通过选择器检测更改，还是有更合适的方法？

Answer 1

实际上有无数种方法可以做到这一点，这里有一个关于如何通过 ngrx-store 和效果做到这一点的示例：

1. ...
2. ...
3. Service 将成功结果返回给 Effect（在我们的例子中是一个更新的用户对象）
4. 效果发出UPDATE_USER_SUCCESS_ACTION。效果与成功动作一起发出另一个动作 RESET_UPDATE_EVENT_ACTION（或者您可以为 如果你愿意的话，这个）

reducer 以下列方式处理这些动作：

UPDATE_USER_SUCCESS_ACTION：

• 当然更新用户对象
• 在商店中设置标志：userWasUpdated: true

RESET_UPDATE_EVENT_ACTION：

• 在商店中设置标志：userWasUpdated: false

在您的组件中，您执行以下操作：

userWasUpdated$ = this.store$
    .select(state => state.userWasUpdated) // this will only trigger when the value changed, because ngrxStore.select has a built-in distinctUntilChanged()
    .filter(wasUpdated => wasUpdated)  // we are only in "truthy" events, so we filter out the other events

有了userWasUpdated$，您现在就有了一个Observable，它会在用户对象成功更新时发出。

---

听起来像是很多代码？是的，是的。只要有可能，我的个人解决方案是创建一些显示 toast/alert 的通知服务，我直接从效果中调用它。