web-dev-qa-db-fra.com

Comment se désinscrire de ngrx / store?

J'ai un composant qui obtient ses données en s'abonnant à un magasin.

this.store.select('somedata').subscribe((state: any) => {
  this.somedata = state.data;
});

Je veux me désinscrire de cet abonnement lorsque le composant n'est plus, dans d'autres endroits où je m'abonne à quelque chose observable, quelque chose comme ceci:

this.service.data.subscribe(
   (result: any) => {//data}
);

Je l'ai désabonné sur ngOnOnDestroy, comme ceci:

ngOnDestroy(){
   this.service.data.unsubscribe();
}

Mais en cas de magasin je ne peux pas, ça me donne une erreur:

Property 'unsubscribe' does not exist on type 'Store<State>'
angularngrx-store
11
Michael Philips

Lorsque vous vous abonnez, vous recevrez un objet d'abonnement dessus que vous pouvez appeler unsubscribe ()

const subscription = this.store.select('somedata').subscribe((state: any) => {
  this.somedata = state.data;
});
// later
subscription.unsubscribe();

ou

ngOnInit(){
 this.someDataSubscription = this.store.select('somedata').subscribe((state: any) => {
  this.somedata = state.data;
 });
}

ngOnDestroy(){
  this.someDataSubscription.unsubscribe();
}
18
G.Vitelli

Il y a une meilleure façon que la réponse la plus votée, une façon dont vous n'avez pas à gérer un tas d'abonnements, un seul. Ensuite, vous pouvez avoir autant d'abonnements que vous le souhaitez sans avoir à créer un tas de vars inutiles.

  public ngDestroyed$ = new Subject();

  public ngOnDestroy() {
    this.ngDestroyed$.next();
  }

  public ngOnInit() {
    this.myWhateverObs$
        .pipe(takeUntil(this.ngDestroyed$))
        .subscribe((val)=> { this.whatever()});
    this.myWhateverNPlusOne$
        .pipe(takeUntil(this.ngDestroyed$))
        .subscribe((val)=> { this.whatever()})
  }
14
FlavorScape

Vous pouvez obtenir de la valeur sans appeler directement la méthode subscribe, obtenir la valeur par un canal asynchrone comme

@Component({
    template: `
        <div>Current Count: {{ counter | async }}</div>
    `
})
class MyAppComponent {
    counter: Observable<number>;

    constructor(private store: Store<AppState>){
        this.counter = store.select('counter');
    }
}

Ici, nous utilisons un canal asynchrone pour obtenir de la valeur. Le canal asynchrone s'abonne à un observable ou à une promesse et renvoie la dernière valeur qu'il a émise. Lorsqu'une nouvelle valeur est émise, le tuyau asynchrone marque le composant à vérifier pour les modifications. Lorsque le composant est détruit, le canal asynchrone se désabonne automatiquement pour éviter d'éventuelles fuites de mémoire.

5
Akshay Garg

Vous n'avez pas besoin de vous abonner en premier lieu, utilisez | async dans votre modèle. Tout ce que vous obtenez du magasin est observable, laissez angular gérer votre abonnement. Voici api

3
stojevskimilan