Question

什么是更好的做法？！因为ngrx给我们疼痛，我们可以听取状态，我们可以从任何组件发出动作。

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

容器：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 Compnent

@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上侦听列表（状态）然后我们可以从任何组件更改列表，在这种情况下，我们从todo组件中删除todo，列表将由商店自动更新。

但是其他方式是使用@Output（事件发射器），然后从容器中调度动作？

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

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

我填写使用@Output是不需要的，因为商店让我们能够在每个地方倾听和发送行动。

但更好的是什么？为什么？：）

我不需要代码审核，因为我询问的数据流与此应用代码无关（例如）。

谢谢！

Answer 1

在ngRx中，您有智能（容器）和哑（子）组件。因此，在您的情况下，列表组件是智能组件，因为它必须订阅来自州的待办事项。 Todo组件对于哑组件来说是一个很好的例子。它是listcomponent中的一个孩子，不必知道ngStore的存在。

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

更多详细信息：

Smart Dumb Components explained with Code

A comprehensive introduction to ngRx

Answer 2

我认为使用ngrx构建应用程序是创建应用程序的更好方法。

在ngrx中，您只有一个数据源。您的数据将始终在商店中更新。所以所有组件都会有更新的数据。
您的子组件可以直接访问商店中的数据。他们不必依赖父组件来获取数据。
如果使用@Output，则需要将属性从父级传递给子组件。如果要添加其他数据，则需要将整个代码从父组件更新到子组件。

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

2 个答案: