angularangular6state-managementngxsangular-state-managmement

ofActionSuccessful Return True Even When Have Errors in Angular NGXS


I have a problem when i try to edit my user. I've decided to fetch again all the users after successfully updated it. However if there is an error i don't want the form to reset and the modal to disappear. My problem is when i try to update the user and it returns an error. The ofActionSuccessful is still triggering even when there is an error. Please see my code below.

Component.ts

    onEditUser(form: FormGroup) {
        const formData = {
          id: form.value.id,
          name: form.value.name,
          email: form.value.email
        };
        console.log(formData);
        if (form.valid) {
          swal({
            title: 'Update',
            text: 'Are you sure you want to update changes?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0CC27E',
            cancelButtonColor: '#FF586B',
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            confirmButtonClass: 'btn btn-success btn-raised mr-5',
            cancelButtonClass: 'btn btn-danger btn-raised',
            buttonsStyling: false
          }).then(result => {
            console.log(result);
            if (result.value) {
              this.store.dispatch(new UpdateUser(formData));
              this.actions$.pipe(ofActionSuccessful(UpdateUser)).subscribe(() =>
                form.reset(),
                this.modalReference.close()
              );
            }
          });
        }
      }

State.ts

@Action(UpdateUser)
      updateTodo({ getState }: StateContext<UserStateModel>, { payload }: UpdateUser) {
        return this.usersService.updateUser(payload).pipe(
          tap((result) => {
            console.log(result);
            const state = getState();
            this.store.dispatch(new GetUsers);
          }),
          catchError(err => {
            console.log(err);
            return throwError(err);
          })
        );
      }

Solution

  • There is no connection between our update user call and ofActionSuccessful. You are always dispatching ofActionSuccessful action whenever swal promise resolves. You might have been trying to do the following.

     if (form.valid) {
              swal({
                title: 'Update',
                text: 'Are you sure you want to update changes?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#0CC27E',
                cancelButtonColor: '#FF586B',
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                confirmButtonClass: 'btn btn-success btn-raised mr-5',
                cancelButtonClass: 'btn btn-danger btn-raised',
                buttonsStyling: false
              }).then(result => {
                console.log(result);
                if (result.value) {
                  this.store.dispatch(new UpdateUser(formData))
          --->>>        .subscribe((sucess) => {
                   this.actions$.pipe(ofActionSuccessful(UpdateUser)).subscribe(() =>
                    form.reset(),
                    this.modalReference.close()
                  );
                  });
                }
              });
    }