После перемещения состояния очистка состояния влияет на другое состояние

Question

Я новичок в ngrx и у меня проблема с отпиской. Я использую как последние версии Angular, так и ngrx.

У меня есть CreateState и ModelState. После создания CreateState в диалоге я хочу скопировать CreateState как часть ModelState, а затем очистить CreateState, чтобы диалог стал пустым.

Для этого я сначала получаю полное состояние CreateState, а затем вызываю Action для ModelState для копирования.

this.store$.select(CreateSelectors.selectCreateState).subscribe((state: CreateState.State) => {
  this.store$.dispatch(new ModelActions.CreateAction(state));
  this.router.navigateByUrl('/canvas');
});

После того, как я перешел на новую страницу, я вызываю действие на CreateState для очистки.

ngOnInit() {
    this.store$.dispatch(new CreateActions.ClearAction());
}

Но кажется, что Select Subscription с моей первой страницы все еще прослушивает, поэтому при очистке CreateState запускается select и снова отправляется ModelActions.CreateAction.

Я пытался слушать только для .first() Наблюдаемый или отписывающийся от Наблюдаемого, но Typescript говорит, что нет функции для .first() или же .unsubscribe(),

Я что-то не так делаю? Должен ли я использовать другой подход для перемещения и очистки состояний?

Answer 1

Вы должны запустить свой код через канал, там вы можете использовать оператор first().

this.store$.select(CreateSelectors.selectCreateState).pipe(
first(), // should unsubscribe after first iteration
tap( (state: CreateState) => {
      this.store$.dispatch(new ModelActions.CreateAction(state));
      this.router.navigateByUrl('/canvas');
})
).subscribe();

Или вы можете установить переменную и подписаться на нее.

const subscription = this.store$.select(CreateSelectors.selectCreateState).pipe(
tap( (state: CreateState) => {
      this.store$.dispatch(new ModelActions.CreateAction(state));
      this.router.navigateByUrl('/canvas');
})
);

// if you don't subscribe nothing will happen
// unsubscribes after first iteration
subscription.first().subscribe(); 

немного документации:

живое демо first()

документация first() RxJS Документация learn-rxjs

Answer 2

Вы подписываетесь на наблюдаемое, которое возвращается из функции выбора. Вам нужно сохранить это наблюдаемое в переменной, чтобы вы могли ссылаться на него.

Затем вы можете использовать эту переменную, чтобы отписаться от