Маршрут после завершения действия - NGRX и Angular

Question

Угловой 5 и NGRX 5

Я пытаюсь запустить некоторую настраиваемую проверку после того, как пользователи нажмут кнопку поиска, и, если проверка прошла успешно, перейдите на новую страницу.

У меня есть наблюдаемая ошибка isError, которая заполняется из моего магазина:

 isError$: Observable<boolean>;

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

Я вызываю поисковое действие в моем магазине, как показано ниже:

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

Что меня смущает, так это как / когда фактически перенаправлять на новую страницу? По сути, я хочу, чтобы это произошло:

проверка выполнения

в случае успеха -> путь к новой странице

если сбой -> остаться на той же странице с обновленным состоянием (состояние isError будет обновлено до true, у меня это работает)

Я заглянул в ngrx router-store, но в целом смущен как лучший способ реализовать это.

Answer 1

Как уже упоминалось в Начните использовать ngrx / эффекты для этого , вы можете сделать это в эффекте.

Пример в статье - когда вы выходите из системы, но то же самое учитывается для вашего варианта использования:

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

Обратите внимание, что мы используем dispatch: false для предотвращения бесконечного цикла диспетчерских действий.

Answer 2

Вы должны добавить свойство в вашем штате, которое указывает, что проверка прошла успешно. Очевидно, что ваш редуктор должен устанавливать указанное свойство в true всякий раз, когда проверка прошла успешно.

Как только вы это сделаете, в вашем компоненте вы должны store.select и подписаться на этот кусочек состояния и маршрута всякий раз, когда он возвращает true.