如何使用ngrx监听成功的操作

Question

我有一个使用ngrx Store和Effects的Angular2应用程序.一切都很正常不过我不知道最好的方式来处理知道当服务调用操作,以更新成功警报或相似的看法已成功完成.

例如,这是我在CreateUser视图上的流程.

1. 查看调度Action to Effect
2. 效果调用服务来创建用户
3. 服务将成功结果返回到Effect(在我们的示例中为更新的用户对象)
4. 效果通过Reducer通过新状态更新Store.

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

我是否在CreateUser组件上为商店设置了Observable以通过选择器检测更改,或者是否有更合适的方法？

Answer 1

有几乎无穷无尽的方法,这里有一个如何通过ngrx-store和效果来做到这一点的例子:

1. ...
2. ...
3. 服务将成功结果返回到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,发出每当userObject已成功更新.

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