ngrxで状態が変更されたときにコンポーネントのロジックを呼び出す

Question

現在、ngrxでreduxの原理を使用してAngularでアプリケーションを開発しています。

私は、状態の変化に反応し、この状態に応じていくつかのコンポーネントロジックを呼び出すためのベストプラクティスを探しています。

reducers.ts

import {createSelector} from 'reselect'; 

export const getViewTypeOrFilterChanged = createSelector(isLoading, getActiveViewType, getActiveFilter, (isLoading, activeViewType, activeFilter) => { 
    // ensure that data is loaded 
    if (!isLoading) { 
     return { 
      activeViewType: activeViewType, 
      activeFilter: activeFilter 
     }; 
    } 
}); 

例-component.ts

@Component({ ... }) 
export class ExampleComponent implements OnInit { 

    // properties ... 

    constructor(private store: Store<fromRoot.AppState>) { 
    } 

    ngOnInit() { 
     this.subscriptions.push(
      this.store.select(fromRoot.getViewTypeOrFilterChanged).subscribe((result) => { 
       if (result) { 
        this.property1 = result.activeType; 
        this.dependentHelperClass.method1(result.activeFilter); 

        this.method1(); 
        this.method2(result.activeFilter); 
        this.method3(); 
       } 
      }) 
     ); 
    } 

    ngOnDestroy() { 
     this.subscriptions.forEach((subscription: Subscription) => { 
      subscription.unsubscribe(); 
     }); 
    } 

    // methods ... 
} 

することができますように：私は、私が何を意味するかを明確にするためにあなたに（簡体字）の例をあげますセレクタ（getViewTypeOrFilterChanged）内で状態の3つのスライスを結合するためにreselctも使用していますを参照してください。このセレクタへのサブスクリプションでは、結合された状態に従っていくつかのアクションを実行したいと考えています。

ここでは、ngrxストアとサブスクリプションをパブリッシュ/サブスクライブパターンで使用するような気がしています。また、ngOnInitのサブスクリプション（複数ある）とngOnDestroyのサブスクリプションも気になりますが、私は同じ結果を得る方法を考えていません。非同期パイプ。 （組み合わせた）状態変化に反応するよりエレガントな方法がありますか？

ありがとうございます！

Answer 1

RxJSではすべてをストリームと見なすべきです。次のコードは例のようなものですが、私はあなたのUIロジックを本当に知っていないので、構造を見て、コード、それは私の非常に野生の推測のようなより多くのだから：

@Component({ ... }) 
export class ExampleComponent implements OnInit { 
    private destroyed$ = new Subject<boolean>(); 

    // the following streams can be used in the controller 
    // as well as in the template via | async 
    // the .share() is just so the | async pipe won't cause unneccessary stream-creations (the result should be the same regardless of the .share(), it's just a minor performance-enhancement when using multiple | async) 
    isLoading$ = this.store.select(fromRoot.isLoading).share(); 
    activeViewType$ = this.store.select(fromRoot.getActiveViewType).share(); 
    activeFilter$ = this.store.select(fromRoot.getActiveFilter).share(); 
    activeViewTypeAndFilter$ = Observable.combineLatest(this.activeViewType$, this.activeFilter$).share(); 

    constructor(private store: Store<fromRoot.AppState>) { 
    } 

    ngOnInit() { 
     this.isLoading$ 
      .filter(isLoading => !isLoading) // the initial stream will not emit anything until "loading" was false once 
      .switchMapTo(this.activeViewTypeAndFilter$) 
      .do([viewType, filter] => { 
       this.dependentHelperClass.method1(activeFilter); 

       this.method1(); 
       this.method2(activeFilter); 
       this.method3(); 
      }) 
      .takeUntil(this.destroyed$) //this stream will automatically be unsubscribed when the destroyed$-subject "triggers" 
      .subscribe(); 
    } 

    ngOnDestroy() { 
     this.destroyed$.next(true); 
     this.destroyed$.complete(); 
    } 

    // methods ... 
} 

私が言ったように：ロジック・ワイズ私は、これは何が必要であれば言うことはできませんが、それは異なるオペレータ及び/または使用の問題だけです別の順序であなたの "メインストリーム"を別々に整理してください。