Обработка асинхронных действий NgRx - PullRequest
Новая
       29

Обработка асинхронных действий NgRx

2 голосов
/ 30 мая 2019

У меня есть приложение Angular, и основной вид разделен на 2 компонента.Это будет касаться обработки действий NgRx в асинхронном режиме.

1) MenuComponent - содержит различные кнопки навигации, такие как кнопка выхода из системы.После нажатия кнопки выхода из системы вызывается authenticationService.logout(), который отправляет http-запрос бэкэнду с последующим выходом пользователя из системы.Следовательно, это асинхронная операция. 

public logout() {
  this.authenticationService.logout();
  this.router.navigate(['login']);
}

2) DashboardComponent - я написал следующее для обработки ловушки жизненного цикла OnDestroy, которая будет вызываться всякий раз, когда компонент уничтожается.Он использует NgRx для управления состоянием. 

ngOnDestroy() {
  this.store.dispatch(new UpdateDashboardConfiguration());
  this.store.dispatch(new ClearDashboardState());
}

Отправка действия UpdateDashboardConfiguration() приведет к тому, что приложение отправит http-запрос на сервер для сохранения конфигураций панели мониторинга, поэтому он также является асинхронным.

Основной вопрос заключается в том, что когда пользователь решает выйти из системы, нажав кнопку выхода из системы на MenuComponent, существует ли способ гарантировать, что отправка UpdateDashboardConfiguration() будет завершена до отправки * 1018?* Вызываются действия, а также authenticationService.logout() из другого компонента MenuComponent?

Предпочтительный поток будет следующим:

UpdateDashboardConfiguration => ClearDashboardState => logout()

Для тех, кому интересно, this.store.dispatch(new UpdateDashboardConfiguration()).subscribe(...) не будет работать как store.dispatch () типа void, а не как наблюдаемый.

Заранее спасибо.

Для тех, кто заинтересован, это Effect для действия UpdateDashboardConfiguration. 

@Effect()
UpdateDashboardConfiguration$ = this.actions$.pipe(
  ofType<UpdateDashboardConfiguration>.(DashboardActionTypes.UpdateDashboardWidget),
  withLatestFrom(this.store.select(selectDashboardLayoutStateConfig)),
  switchMap(action => {
    return this.dashboardService.updateDashboardConfiguration(action).pipe(
      map(data => (new UpdateDashboardConfigurationSuccess(data))),
    );
  }
  ),
);

1 Ответ

1 голос
/ 30 мая 2019

Похоже, вам нужно изменить то, что делает ваша функция выхода из системы. Если у вас есть требуемый порядок выполнения ваших действий, вы не должны позволять им выполняться асинхронно.

Поскольку вы используете NgRx, вы должны отправлять действие LogoutClicked, а не вызывать сервисную функцию. Это позволит вам контролировать поток, чтобы вы могли обрабатывать все в правильном порядке. Вы можете настроить эффект, который обрабатывает LogoutClicked и отправляет действие UpdateDashboardConfiguration. Затем, когда вы обрабатываете UpdateDashboardConfigurationSuccess, вы можете решить, нужно ли отправлять действие ClearDashboardState, и оттуда вы, наконец, можете отправить действие Logout, которое вызывает вашу функцию службы выхода из системы.

Возможно, вам потребуется обновить полезные нагрузки, содержащиеся в ваших действиях, чтобы помочь эффектам принять решение о том, какие действия следует отправлять дальше. Вы можете использовать найденный шаблон эффекта Content-Based Decider здесь .

...