呼叫时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 ... 
} 

正如我所说的：逻辑明智，我不能说，如果这是你需要什么，但是这只是一个使用不同的运营商和/或的问题不同的顺序来安排你的“主流”不同。