在有通量的角度上，“哑”组件应该发出事件还是触发动作？

Question

在使用有角度的磁通模式时，有很多关于智能和哑组件的讨论。

最后，我让我的智能组件(比如ItemsListComponent)“管理”应用程序状态(应用程序状态的片段)。转储组件是ItemCardComponent。

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

我的ItemCardComponent接收item作为输入。那么，应该发出事件(approach A)还是自行触发操作(approach 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

我们可以从直接连接到存储的哑组件开始(通过发送事件)。

下一步是等到我们真正需要重用这个组件。而不是重构和分离智能/转储组件。

一种早期优化(泛化?)是万恶之源