呼叫時NGRX

Question

狀態的改變我目前正在開發使用Redux的原理與NGRX角的應用程序組件的邏輯。

我在尋找一個最佳實踐的反應狀態的改變，並呼籲根據這個國家的一些組件的邏輯。我給你一個（簡化）爲例作清楚我的意思：

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 ... 
} 

，你可以請參閱我還使用reselct在選擇器（getViewTypeOrFilterChanged）中組合三個不同的狀態片。在訂閱這個選擇器時，我想根據組合狀態採取一些行動。

的事情是，我感覺像在多發佈/訂閱此模式的方式使用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 ... 
} 

正如我所說的：邏輯明智，我不能說，如果這是你需要什麼，但是這只是一個使用不同的運營商和/或的問題不同的順序來安排你的「主流」不同。