Question

我有一个组件，该组件的表单可以将项目添加到列表中。将项目成功添加到列表后，我想使用form.resetForm();，但我想不出一种简单的方法来知道该操作何时成功。我希望我可以订阅动作分派，但是还无法弄清楚。

我已经尝试了几种在网上找到的方法，但是它们似乎都已经过时了。我确实通过在商店中添加saving属性并订阅了该属性来使它正常工作，但是对于应该非常简单的操作而言，这似乎是过多的工作。

有没有一种方法可以只订阅组件或容器中的内容而无需重构NGRX逻辑？

这是我的容器中将项目添加到列表中的代码：

addPosition(position: Position) {
  this.store.dispatch(new fromStore.CreatePosition(position));
}

操作：

export const CREATE_POSITION = '[Profile] Create Position';
export const CREATE_POSITION_FAIL = '[Profile] Create Position Fail';
export const CREATE_POSITION_SUCCESS = '[Profile] Create Position Success';

export class CreatePositionSuccess implements Action {
  readonly type = CREATE_POSITION_SUCCESS;
  constructor(public payload: any) {}
}

效果：

@Effect()
    createPosition$ = this.actions$.pipe(
        ofType(positionsActions.CREATE_POSITION),
        map((action: positionsActions.CreatePosition) => action.payload),
        switchMap(position => {
            return this.positionService
                .addPosition(position)
                .pipe(
                    map(newPosition => new positionsActions.CreatePositionSuccess(newPosition)),
                    catchError(error => of(new positionsActions.CreatePositionFail(error)))
                );
        })
    );

我正在使用ngrx的版本7和rxjs的6.3。

Answer 1

您可以将 Action 服务注入您的组件，然后订阅该服务，以便在分派“ CreatePositionSuccess ”操作时进行侦听。

例如，在您的组件中：

import { Actions } from '@ngrx/effects';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class SampleClass implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  //Injecting the service
  constructor(private actions$: Action){}

  onInit() {
    this.actions$
    .pipe(
      ofType<CreatePositionSuccess>(CREATE_POSITION_SUCCESS),
      // You can add more operator if it is necessary into the observable.
      takeUntil(this.unsubscribe$)
    )
    .subscribe(() => {
      // Here you can execute the reset function
    });
  }

  onDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

这样，您将能够立即调用成功操作来重置表单。

顺便说一句，销毁组件时，“取消订阅”主题用于自动从Observable取消订阅，以避免内存泄漏。您会注意到我是如何在on destroy方法中使用它的。

在组件

1 个答案: