angular - 在组件中处理成功的 Action 分派(dispatch)

Question

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

我尝试了几种我在网上找到的方法，但它们似乎都过时了。我确实通过添加 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

您可以注入(inject) 行动服务到您的组件中，然后订阅它以便在您调度“ 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();
  }
}

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

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