@ ngrx / Effects обработка запросов API - PullRequest
Новая
       20

@ ngrx / Effects обработка запросов API

0 голосов
/ 24 мая 2018

У меня был случай, когда моя форма входа в систему перестала работать после одной неудачной попытки входа в систему, для создания запроса, который я использовал, и вот как он выглядел до изменений: 

@Effect()
login$ = this.actions$.ofType<authActions.Login>(
  authActions.LOGIN,
).switchMap(
  ({ payload: data }) => this.client.login(data),
).map(
  ({ token }) => new authActions.LoginSuccess(token),
).catch(
  (error) => of(new authActions.LoginFailure(error)),
);

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

Я отчаянно пытался исправить эту ошибку, затем яЯ сделал изменение, которое я считал бессмысленным: 

@Effect()
login$ = this.actions$.ofType<authActions.Login>(
  authActions.LOGIN,
).switchMap(
  ({ payload: data }) => this.client.login(data).map(
    ({ token }) => new authActions.LoginSuccess(token),
  ).catch(
    (error) => of(new authActions.LoginFailure(error)),
  ),
);

Но, к счастью, это (IMO) бессмысленное изменение исправило все.Внезапно эффект был успешно запущен после неудачной попытки входа в систему.Может ли кто-нибудь объяснить мне, что случилось?

1 Ответ

0 голосов
/ 25 мая 2018

Когда ошибка обнаруживается оператором catch (или, в RxJS версии 6, catchError), составная наблюдаемая продолжается с другой наблюдаемой.

Это означает, чточто при возникновении ошибки ваш эффект продолжается с наблюдаемой of(new authActions.LoginFailure(error)), которая возвращается в пределах catch.

Если продолжить с этой наблюдаемой, то будет отправлено действие LoginFailure, но после этого наблюдаемое завершится.Это означает, что эффект завершается, и его подписчики автоматически отписываются.Таким образом, эффект прекращает отправку дальнейших действий.

Это более подробно обсуждается в статье Пола Лессинга Обработка ошибок в эффектах NgRx и существует правило TSLint - rxjs-no-unsafe-catch - чтобы обнаружить эту проблему в моем пакете rxjs-tslint-rules.

...