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

Question

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

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

1. 查看调度行动到效果
2. 效果调用服务以创建用户
3. 服务将成功结果返回给Effect（在我们的例子中是更新的用户对象）
4. 效果通过Reducer通过新状态更新商店。

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

我是否在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成功更新就会发出。{/ p>

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