Блог

У меня есть форма, которая создает пользователя, и если она уже существует в базе, мне возвращается ошибка, и я открываю всплывающее окно

Моя служба :

   data$ = new BehaviorSubject({
    userList: {},
    user: {},
    create: ''
  });
  
  dispatch(action: Action): Observable<true | { error: string; }> {
    switch (action.type) {
      case ActionTypes.USER_GET_LIST:
        this.getUsers(action.payload);
        return of(true);
      case ActionTypes.USER_CREATE:
        this.createUser(action.payload);
        return of(true);
    }
  }

  private createUser(user: User){
    this.http.post{body : user})
    .subscribe(
        message => this.data$.next({...this.data$.value, create: message}),
        error => {
          this.data$.error(error)
          if (error.error?.title === 'CustomException' amp;amp; error.status === 400) {
            //OPEN POPUP
            return throwError(error);
          } else {
            return throwError(error);
          }   
        }
    ); 
  }
 

Я вызываю службу в своем компоненте :

 this.userService.dispatch({ type: ActionTypes.USER_CREATE, payload: user });
this.userService.data$.asObservable();
this.router.navigate(['/users/user/list']);
 

Моя проблема в том, что он переходит непосредственно на страницу списка, и если возникает ошибка, то на странице списка отображается сообщение if. Я хочу дождаться возврата и быть перенаправленным только в том случае, если ошибки нет

Существует несколько проблем с кодом:

a1) this.userService.data$.asObservable();

Это ничего не дает. ...data$.asObservable(); возвращает наблюдаемый объект вашего BehaviourSubject, но вы не присваиваете его переменной и не используете каким-либо другим способом. Трудно сказать, что это означало.

а2) this.userService.dispatch({ type: ActionTypes.USER_CREATE, payload: user });

Это также возвращает наблюдаемое, которое не назначено и не используется.

a1) и a2) являются причиной, по которой ваш код устремляется вперед this.router.navigate(['/users/user/list']); . Но до тех пор http-запрос еще не завершен, и все, чего вы хотели достичь с помощью a1), не произошло.

б) switch (action.type) { ... }

Вы вызываете функции в своем коммутаторе, которые имеют асинхронное поведение. Но вы немедленно возвращаете наблюдаемое <логическое значение>, не дожидаясь завершения createUser / getUsers .

c) общий комментарий:

Похоже, что если вы начинаете работать с Observables, ngrx и rxjs.

Исходя из моего опыта, я бы рекомендовал сначала ознакомиться с наблюдаемыми или другими асинхронными данными.

Затем посмотрите, как rxjs позволяет вам работать с наблюдаемыми с помощью .pipe() и rxjs/operators .

Наконец, взгляните на ngrx. Ваша dispatch функция выполняет действия, которые идеально соответствовали бы ngrx / effects, если бы вы подключались к CreateUser вместо подписки.