时间戳

首页 > 解决方案 > 动作完成后的路由 - NGRX 和 Angular

angular - 动作完成后的路由 - NGRX 和 Angular

问题描述

角 5 和 NGRX 5

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

我有一个 isError observable 正在从我的商店填充：

 isError$: Observable<boolean>;

  ngOnInit() {
    this.isError$ = this.store$.select(
      ShipmentLookupStoreSelectors.selectShipmentLookupError
    );
  }

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

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

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

运行验证

如果成功 -> 路由到新页面

如果失败 -> 保持在更新状态的同一页面上（isError 状态将更新为 true，我有这个工作）

我已经研究过ngrx router-store，但总体上对实现这一点的最佳方式感到困惑。

标签： angularngrxngrx-router-store

解决方案

如Start using ngrx/effects for this中所述，您可以在效果中执行此操作。

文章中的示例是当您注销时，但对于您的用例同样重要：

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

请注意，我们使用dispatch: false它是为了防止分派动作的无限循环。

推荐阅读