Обработка успешной отправки действий в компоненте

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

У меня версия 7 ngrx и 6.3 версии rxjs.

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 при уничтожении компонента во избежание утечек памяти. Вы можете заметить, как я использовал его в методе уничтожения.