7
votes

Doit-on se désinscrire de ngxs Selector?

J'utilise la gestion des états ngxs. Dois-je me désabonner des sélecteurs ou est-ce que cela est géré par ngxs?

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

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

angular ngxs

1 commentaires

Oui tu devrais. Voici l'un des moyens de vous désabonner: alligator.io/angular/takeuntil-rxjs-unsubscribe

3 Réponses :

1
votes

Oui, si vous vous abonnez manuellement au composant, vous devez vous désabonner.

Il est préférable d'éviter cela si possible et de vous abonner au modèle de composant en utilisant le tube async .

0 commentaires

10
votes

Pour le premier exemple, vous pouvez utiliser en combinaison avec le canal asynchrone . Le canal Async se désabonnera pour vous:

Dans votre fichier ts :

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

Dans votre fichier html :

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

Cependant, lorsque vous souhaitez utiliser la méthode d'abonnement actuelle, vous devrez vous désabonner manuellement. La meilleure façon de le faire est d'utiliser takeUntil:

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

Vous pouvez utiliser pipe (takeUntil (this.destroy)) pour chaque abonnement de votre composant sans avoir besoin d'ajouter manuellement unsubscribe () pour chacun d'entre eux.

1 commentaires

Je suis d'accord avec Scuba Kay. C'est exactement ce que nous faisons dans notre projet d'entreprise.

1
votes

La solution Async Pipe est généralement la meilleure.

Selon votre cas d'utilisation, vous pouvez également utiliser l'opérateur first () .

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

Elle est plus courte que l'approche takeUntil et vous n'avez pas besoin de vous désabonner.

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

Attention: cela renverra une valeur et se désabonner. Il peut donc être utilisé si vous avez besoin d'une valeur actuelle du magasin, puis faites quelque chose avec. Ne l'utilisez pas pour afficher quelque chose sur l'interface graphique - il affichera uniquement le premier changement :)

0 commentaires