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

Question

Angular 5 和 NGRX 5

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

我有一个正在从我的商店中填充的 isError 可观察对象：

 isError$: Observable<boolean>;

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

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

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

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

运行验证

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

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

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

Answer 1

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

完成后，在您的组件中，您必须 store.select 并订阅该状态片并在 returns 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

Route After Action Completes - NGRX and Angular

ngrx

angular

ngrx-router-store