Должны ли мы отписаться от ngxs Selector? - PullRequest
Новая
       17

Должны ли мы отписаться от ngxs Selector?

3 голосов
/ 11 июня 2019

Я использую ngxs State Management.Нужно ли мне отписываться от селекторов или это обрабатывается ngxs? 

@Select(list)list$!: Observable<any>;

this.list$.subscribe((data) => console.log(data));

Ответы [ 3 ]

2 голосов
/ 11 июня 2019

Для первого примера вы можете использовать в сочетании с Асинхронный канал . Асинхронный канал откажется от вас:

В вашем ts файле: 

@Select(list) list: Observable<any>;

В вашем html файле: 

<ng-container *ngFor="let item of list | async">
</ng-container>
<!-- this will unsub automatically -->

Однако, если вы хотите использовать фактический метод подписки, вам нужно будет отменить подписку вручную. Лучший способ сделать это - использовать takeUntil: 

import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

@Component({
  selector: 'app-some-component',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class SomeComponent implements OnInit, OnDestroy {
  private destroy: Subject<boolean> = new Subject<boolean>();

  constructor(private store: Store) {}

  public ngOnInit(): void {
    this.store.select(SomeState).pipe(takeUntil(this.destroy)).subscribe(value => {
      this.someValue = value;
    });
  }

  public ngOnDestroy(): void {
    this.destroy.next(true);
    this.destroy.unsubscribe();
  }
}

Вы можете использовать pipe(takeUntil(this.destroy)) для каждой подписки в вашем компоненте без необходимости вручную добавлять unsubscribe() для каждой из них.

1 голос
/ 11 июня 2019

Решение Async Pipe обычно является лучшим.

В зависимости от вашего варианта использования вы также можете использовать оператор first () . 

observable.pipe(first()).subscribe(...)

Это короче, чем подход takeUntil, и вам не нужно отписываться.

https://www.learnrxjs.io/operators/filtering/first.html

Осторожно: это вернет значение и отписаться. Так что его можно использовать, если вам нужно текущее значение из магазина, а затем что-то с ним сделать. Не используйте его для отображения чего-либо в графическом интерфейсе - он покажет только первое изменение:)

1 голос
/ 11 июня 2019

Да, если вы подписываетесь вручную в компоненте, вам необходимо отписаться.

Лучше всего, если возможно, избежать этого и подписаться в шаблоне компонента, используя async pipe.

...