使用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更新特定组件

回答

相关问题