angular - 如何使用 ngrx 监听成功操作

Question

我有一个使用 ngrx Store 和 Effects 的 Angular2 应用程序。一切正常，但我不确定处理知道服务调用操作何时成功完成以便使用成功警报或类似信息更新 View 的最佳方式。

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

1. 查看派发行动效果
2. 调用服务创建用户
3. 服务将成功结果返回给 Effect(在我们的例子中是更新的用户对象)
4. Effect 通过 Reducer 的新状态更新 Store。

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

我是要在 CreateUser 组件上为商店设置 Observable 以通过选择器检测更改，还是有更合适的方法？

Answer 1

实际上有无穷无尽的方法可以做到这一点，这里有一个关于如何通过 ngrx-store 和 effects 做到这一点的例子:

1. ...
2. ...
3. 服务将成功结果返回给 Effect(在我们的例子中是更新的用户对象)
4. 效果发出 UPDATE_USER_SUCCESS_ACTION。效果与成功 Action 一起发出另一个 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，它会在 userObject 成功更新时发出。

---

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