Question

在将Flux模式与Angular一起使用时，关于智能和哑组件的讨论很多。

我最终使我的智能组件（例如ItemsListComponent）“管理”应用程序状态（应用程序状态的一部分）。转储组件为ItemCardComponent：

<div *ngFor="let item of state$.items | async">
  <app-item-card [item]="item" (delete)="handleDelete($event)"></app-item-card>
</div>

我的ItemCardComponent收到item作为输入。但是然后，应该发出事件（方法A ）还是自己触发操作（方法B ）？

@Component({
  selector: 'app-item-card',
  template: `
    <div>
      {{ item.title }}
      <button (click)="delete.emit(item.id)">Delete</button>
      <button (click)="toggleFavorite(item.id)">Favorite</button>
    </div>
  `,
})
export class ItemCardComponent {
  @Input()
  item: any;

  // Approach B
  @Output()
  delete: EventEmitter<number> = new EventEmitter();

  // Approach A
  toggleFavorite(id: number) {
    // Assume that we have access the store here
    this.store.dispatch({ type: '[Item] ToggleFavorite', payload: id });
  }
}

使用方法A，您有很多样板代码（因为智能组件应处理事件，然后触发动作）。使用方法B，我们将转储组件耦合到状态。

Answer 1

我们可以从直接连接到商店的哑巴组件开始（通过调度事件）。

下一步是等待，直到我们真正需要重用此组件。比我们重构和分离智能/转储组件。

过早的优化（generalization？）是万恶之源

在Angular with Flux模式中，“哑”组件应该发出事件还是触发动作？

1 个答案: