ngrx에서 상태가 변경 될 때 구성 요소 논리를 호출합니다.

Question

현재 ngrx를 사용하여 축소 형 원칙을 사용하여 Angular로 응용 프로그램을 개발 중입니다.

이 상태에 따라 상태 변경에 반응하고 일부 구성 요소 로직을 호출하는 모범 사례를 찾고 있습니다.

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

을

reducers.ts : 나는 내 말은 분명 무엇을 할 당신에게 (간체) 예를 줄 것이다 선택기 (getViewTypeOrFilterChanged) 내에서 상태의 세 가지 슬라이스를 결합하기 위해 reselct를 사용 중입니다. 이 선택기에 가입하면 결합 된 상태에 따라 몇 가지 작업을 수행하려고합니다.

사실, 여기에 게시/구독 방식으로 ngrx 스토어와 구독을 사용하는 느낌이 들지만 느낌이 정확하지 않습니다. 또한 ngOnInit의 구독 (nwOnInit)과 ngOnDestroy의 구독 취소 (nwOnDestroy)의 구독 (Subscriptions)은 문제가되지만, 예를 들어 다음을 사용하여 동일한 결과를 얻는 방법을 생각할 수 없습니다. 비동기 파이프. (결합 된) 상태 변화에 반응하는 좀 더 우아한 방법이 있습니까?

감사합니다.

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

내가 말했듯이 : 논리 - 현명한 나는 이것이 당신이 필요로하는 경우 말할 수 있지만, 다른 사업자 및/또는를 사용하여 단지 질문 당신의 "주류"를 다르게 배열하는 다른 순서.