使用redux更新特定組件

-1

Im使用redux，用於將組件的展開事件分派到另一個組件。使用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時，它被所有其他頭部組件攔截。有沒有辦法區分哪些組件應該更新？

來源

2016-11-17 Anouar

一些挖後，我發現這篇文章：http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays .html，它解釋瞭如何從使用單個計數器到多個計數器，但無法找到使用角度2的良好示例。 – Anouar

相應地分解您的狀態，它總是很好（在使用redux之前）架構師爲您的應用程序設置狀態/終極版。 – ajmajmajma

我的狀態非常簡單。問題在於它被一個通用組件使用。我不能真正說出「建設一個國家」的意思。 – Anouar

-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 }); 
    } 

}

來源

2016-11-22 16:51:17 Anouar

使用redux更新特定組件

回答

相關問題