reduxを使用して特定のコンポーネントを更新します。

Question

Im reduxを使用して、コンポーネントから別のコンポーネントに展開イベントをディスパッチします。

これらのコンポーネントは、テーブル内で使用される：

<table class="table table-bordered"> 
    <thead> 
     <tr> 
     <th *ngFor="let business of businesses"> 
      <app-business-header-cell [business]="business"></app-business-header-cell> 
     </th> 
     </tr> 
    </thead> 
    </table> 

マイヘッダ成分：

export class BusinessHeaderCellComponent implements OnInit { 

    @Input() 
    business: Business; 

    @select() columnState$: Observable<any>; 

    constructor(private ngRedux: NgRedux<IAppState>) { } 

    ngOnInit() { 
    } 

    onClickExpand(){ 
    this.ngRedux.dispatch({ type: 'EXPAND', id: this.business.id }); 
    } 

    onClickCollapse(){ 
    this.ngRedux.dispatch({ type: 'COLLAPSE', id: this.business.id }); 
    } 

} 

ディスパッチ及び状態更新が正常に動作しています。

私の問題は、私のアクションEXPANDをディスパッチすると、他のすべてのヘッダーコンポーネントによって傍受されるということです。どのコンポーネントを更新するべきかを区別する方法はありますか？私が作ってみた

Answer 1

最も簡単な解決策：いくつかの掘削後

export class BusinessHeaderCellComponent implements OnInit { 

    @Input() 
    business: Business; 

    @select() columnState$: Observable<any>; 

    constructor(private ngRedux: NgRedux<IAppState>) { } 

    ngOnInit() { 
    // ADDED THIS 
    this.columnState$.subscribe(state => { 
     if(this.business.id == state.id) this.isExpanded = state.isExpanded; 
    }); 
    } 

    onClickExpand(){ 
    this.ngRedux.dispatch({ type: 'EXPAND', id: this.business.id }); 
    } 

    onClickCollapse(){ 
    this.ngRedux.dispatch({ type: 'COLLAPSE', id: this.business.id }); 
    } 

}