Перехват ошибок Firebase Auth с эффектами ngrx

Question

Я работаю над проектом angular5 / firebase / ngrx, и у меня возникают проблемы с обнаружением ошибок во время регистрации.

Если я отправляю форму регистрации, используя письмо, которое, как я знаю, уже есть в системе, я получаюследующая ошибка в моей консоли: POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=AIzaSyB_MH0xkLudBoy2QwVn6jfaFTUjJUylYHs 400 ()

, и мои эффекты ловят следующую ошибку «почтовый адрес уже используется другой учетной записью».и отправляет signupErrorAction()

Но если я немедленно повторно отправлю форму, запрос никуда не денется.вызов никогда не попадает в мой файл эффектов или в мою службу аутентификации.Мне нужно обновить страницу, чтобы все звонки снова работали.

Насколько я могу сузить, ошибка 400 POST вызывает проблему.Я опубликую некоторый код, и я мог бы использовать любые предложения, которые могут быть у любого.Дайте мне знать, если вам нужна дополнительная информация

my-auth-service

public registerWithEmail(payload: any): Promise<any> {
    console.log('signup called');
    return this.afAuth.auth.createUserWithEmailAndPassword(payload.email, 
      payload.password);
}

my-effect

/**
* Register with email and passowrd.
*/
@Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .map((action: actions.SignUpAction) => action.payload)
    .do(console.log)
    .switchMap(payload => this.authService.registerWithEmail(payload))
    .do(console.log)
    .map(data => new actions.SignUpSuccessAction({ user: data.user }))
    .do(console.log)
    .catch(error => Observable.of(new actions.SignUpErrorAction({ error: error })));

my-signup-method

public register() {

    console.log('register');

    const payload = {
      email: this.email,
      password: this.password,
      displayName: this.name
    }

    // dispatch AuthenticationAction and pass in payload
    this.store.dispatch(new SignUpAction(payload));
}

Обновление: я пробовал это и получал всевозможные ошибки

    @Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .pipe(
    map((action: actions.SignUpAction) => action.payload),
    switchMap(payload => this.authService.registerWithEmail(payload)
        .pipe(
        map(data => new actions.SignUpSuccessAction({ user: data.user })),
        catch(error => Observable.of(new actions.SignUpErrorAction({ error: error })))
        )
    );

Первая ошибка, которую я получаю для: map ((action: actions.SignUpAction) => action.payload),

Контекст «this» типа «void» не может быть назначен методу «this» типа «Observable».

Это мой импорт rxjs для файла эффектов

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
import "rxjs/add/operator/debounceTime";
import 'rxjs/add/observable/fromPromise'; 
import 'rxjs/add/observable/of';

Спасибо ПК

Answer 1

Вам необходимо выполнить catchError (или catch) в пределах switchMap, чтобы внешняя наблюдаемая не отменялась при ошибке.

@Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .map((action: actions.SignUpAction) => action.payload)
    .switchMap(payload => this.authService.registerWithEmail(payload)
      .map(data => new actions.SignUpSuccessAction({ user: data.user }))
      .catch(error => Observable.of(new actions.SignUpErrorAction({ error: error }))
    )
);

Я также обновил вашпример использования pipeable operators.

@Effect()
public register: Observable<Action> = this.actions$
    .ofType(actions.ActionTypes.SIGN_UP)
    .pipe(
      map((action: actions.SignUpAction) => action.payload),
      switchMap(payload => this.authService.registerWithEmail(payload)
        .pipe(
          map(data => new actions.SignUpSuccessAction({ user: data.user })),
          catchError(error => Observable.of(new actions.SignUpErrorAction({ error: error })))
        )
      )
    );

Чтобы это работало, вам нужно добавить новый импорт:

import { map, switchMap, catchError } from 'rxjs/operators';