ofActionSuccessful Return 即使在 Angular NGXS 中有错误也是如此

Question

我在尝试编辑我的用户时遇到问题。我决定在成功更新后再次获取所有用户。但是，如果出现错误，我不希望表单重置并且模态消失。我的问题是当我尝试更新用户时 returns 出现错误。即使出现错误， ofActionSuccessful 仍然会触发。请在下面查看我的代码。

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);
          })
        );
      }

Answer 1

我们的更新用户调用和 ofActionSuccessful 之间没有任何联系。每当 swal 承诺解决时，您总是会调度 ofActionSuccessful 操作。您可能一直在尝试执行以下操作。

 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()
              );
              });
            }
          });
}

Answer 2

来晚了，但我想给个建议试试这个。

this.store.dispatch(new UpdateUser(formData));
this.actions$.pipe(ofActionSuccessful(UpdateUser)).subcribe((res)=> {
// any thing you want to do
});

ofActionSuccessful Return 即使在 Angular NGXS 中有错误也是如此

ofActionSuccessful Return True Even When Have Errors in Angular NGXS

state-management

angular

angular6

ngxs

angular-state-managmement