javascript - ngrx - 使用@output 或直接与商店交互

Question

什么是更好的好习惯？! 因为 ngrx 给了我们痛处，所以我们可以监听状态，并且可以从任何组件分派(dispatch)操作。

所以我写了一些简单的待办事项列表应用程序:

容器:TodosListComponent

@Component({
  selector: 'todos-list',
  template: `
        <ul>
            <li *ngFor="let todo of list">
                <todo [todo]="todo"></todo>
            </li>
        </ul>
  `,
})
export class TodosListComponent implements OnInit {
  public list;
  constructor(private store: Store<any>) { }

  ngOnInit() {
    this.list = this.store.select('todos','list');  
  }

}

子级:Todo 组件

@Component({
  selector: 'todo',
  template: `
    <span>{{ todo.content}}</span>
    <span (click)="delete(todo)"> X </span>
  `,
})
export class TodoComponent implements OnInit {

  @Input() todo: Todo;
  constructor(
      private store: Store<any>
  ) { }

  ngOnInit() {

  }

  delete(todo) {
      this.store.dispatch({type: 'DELETE_TODO', payload: todo});
  }
}

所以我们以这种方式监听 TodosListComponent 上的列表(状态) 然后我们可以从任何组件更改列表，在这种情况下，我们从待办事项组件中删除待办事项列表将由商店自动更新。

但其他方法是使用@Output(事件发射器)然后从容器中派发 Action ？

我的问题是哪种方式更好，为什么？

我认为第一个更好，因为如果我们有更复杂的示例，例如监听结果(状态)的数据网格元素，我们可以从其他组件更改结果(状态)，而无需复杂的事件发射器

我填写 @Output 的使用是不需要的，因为 store 使我们能够在任何地方监听和调度操作。

但是什么更好，为什么？ :)

我不需要代码审查，因为我问的是数据流而不是这个应用程序代码(它是示例)。

谢谢!

Answer 1

在 ngRx 中，您有智能(容器)和哑(子)组件。因此，在您的情况下，列表组件是智能组件，因为它必须从状态订阅待办事项。 Todo 组件是dumb组件的一个很好的例子。它是 listcomponent 的子组件，不必知道 ngStore 的存在。

你为什么要这样做？这是一种降低组件复杂性的方法。如果您有大型应用程序，则很难跟踪所有知道商店的组件。

更多详细信息:

Smart Dumb Components explained with Code

A comprehensive introduction to ngRx