web-dev-qa-db-ja.com

ngrx / storeから退会する方法は？

ストアにサブスクライブしてデータを取得するコンポーネントがあります。

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

コンポーネントがなくなったら、このサブスクリプションのサブスクリプションを解除します。他の場所では、次のような観察可能なものをサブスクライブします。

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

次のように、ngOnOnDestroyで登録を解除しました。

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

しかし、私ができない店の場合、それは私にエラーを与えます：

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

購読すると、その上に購読オブジェクトを受け取ります。unsubscribe（）を呼び出すことができます

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

または

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

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

上位の回答よりも優れた方法があります。これは、サブスクリプションの束を1つだけ管理する必要がない方法です。その後、不必要な変数を大量に作成することなく、必要なだけサブスクリプションを作成できます。

  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

Subscribeメソッドを直接呼び出すことなく値を取得できます。

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

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

ここでは、値を取得するために非同期パイプを使用しています。非同期パイプはObservableまたはPromiseにサブスクライブし、発行した最新の値を返します。新しい値が発行されると、非同期パイプは変更をチェックするコンポーネントをマークします。コンポーネントが破壊されると、潜在的なメモリリークを回避するために、非同期パイプのサブスクライブが自動的に解除されます。

5
Akshay Garg

そもそも購読する必要はありません| asyncテンプレートに。ストアから取得したものはすべて観察可能です。angularサブスクリプションを処理します。ここに api

3
stojevskimilan