Question

Angular 5和NGRX 5

在用户单击搜索按钮后，我尝试运行一些自定义验证，如果验证成功，请转到新页面。

我的商店中正在填充一个isError可观察值：

  onSearch() {
   this.store$.dispatch(new ShipmentLookupStoreActions.Search());
  }

我在商店中调用搜索操作，如下所示：

{{1}}

我感到困惑的是如何/何时实际路由到新页面？我本质上想要发生的是：

运行验证

如果成功->转到新页面

如果失败->保持更新状态在同一页面上（isError状态将更新为true，我可以使用此功能）

我已经研究过ngrx路由器存储，但总体上感到困惑，这是实现此功能的最佳方法。

Answer 1

您必须在状态上添加一个属性，该属性指示验证成功。显然，只要验证成功，您的化简器就应该将所述属性设置为true。

完成此操作后，只要组件返回store.select，就必须true并订阅该状态和路由。

Answer 2

如Start using ngrx/effects for this中所述，您可以有效地做到这一点。

本文中的示例是您注销时的情况，但对于您的用例来说却是相同的：

@Effect({ dispatch: false })
logOut = this.actions.pipe(
  ofType(ActionTypes.LogOut),
  tap([payload, username] => {
    this.router.navigate(['/']);
  })
)

请注意，我们正在使用dispatch: false来防止调度动作的无限循环。

行动完成后的路线-NGRX和Angular

2 个答案: