Javascript ngrx-使用@output或直接与store交互

什么是更好的良好实践？！ 因为ngrx给了我们痛处，我们可以监听状态，我们可以从任何组件发送动作

因此，我编写了一些简单的待办事项列表应用程序：

容器：ToDoListComponent

@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');  
  }

}

@组件({
选择器：“待办事项列表”，
模板：`




`,
})
导出类ToDoListComponent实现OnInit{
公开名单；
构造函数（私有存储：存储）{}
恩戈尼尼特（）{
this.list=this.store.select（'todos'，'list'）；
}
}

儿童：待办事项

@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});
  }
}

@组件({
选择器：“todo”，
模板：`
{{todo.content}
X
`,
})
导出类TodoComponent实现OnInit{
@输入（）todo:todo；
建造师(
私人商店
) { }
恩戈尼尼特（）{
}
删除（待办事项）{
dispatch（{type:'DELETE_TODO'，payload:TODO}）；
}
}

所以，通过这种方式，我们侦听TODOListComponent上的列表（状态） 然后，我们可以从任何组件更改列表，在这种情况下，我们从todo组件中删除todo。该列表将由存储自动更新

但另一种方法是使用@Output（事件发射器），然后从容器中分派操作

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

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

我认为不需要使用

@Output

，因为store让我们能够随时随地监听和调度操作

但是什么更好，为什么呢？：）

我不需要代码审查，因为我询问的是数据流，而不是此应用程序代码（这是示例）。

谢谢大家!

在ngRx中，您有智能（容器）和哑（子）组件。因此，在您的示例中，列表组件是智能组件，因为它必须从状态订阅todo项。Todo组件是哑组件的一个很好的例子。它是listcomponent的子组件，不必知道ngStore的存在

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

有关更多详细信息：

---

我认为使用

ngrx

构建应用程序是创建应用程序的更好方法

• 在ngrx中，您只有一个数据源。您的数据将始终在存储中更新。因此，所有组件都将具有更新的数据
• 您的子组件可以直接从存储访问数据。它们不必依赖于数据的父组件
• 如果使用@Output，则需要将属性从父组件传递给子组件。如果要添加其他数据，则需要将整个代码从父组件更新到子组件

---

在本例中，这是一个小应用程序，但如果我们构建仪表板应用程序，并且我们有数据网格，那么在容器中我们可以监听存储。但我们在报头中没有新的未来，在网格中过滤结果的时间范围，所以我们如何能够调度操作来更改报头中的数据？这就是为什么如果每个组件都注入存储并分派操作，那么重构代码就变得非常困难的原因。在本例中，这是一个小应用程序，但如果我们构建仪表板应用程序，并且我们有数据网格，所以在容器中我们监听存储。但现在我们需要在报头中添加一个新的future，在网格中过滤结果的时间范围，那么我们如何才能调度操作来更改报头中的数据呢？是哑组件@inputs可以删除异步值。因此，您将使用智能和哑组件，转储组件获得异步输入，因此，如果您发出一个动作，新值将从父组件发送到子组件您可能不理解我的意思，在这个小示例中，我们有一个小应用程序，但如果应用程序变大，认为智能组件需要注意来自哑组件的所有发射器！，如果我们有30个哑组件，智能组件需要处理30个功能！那么您认为从子组件分派操作更好吗？是的，我认为从子组件分派操作更好。这是我个人的看法，不知道统计数字。但我发现它更容易，因为您不必重复代码<代码>组件告诉它想要做什么（操作）。还原程序更新存储。组件获取更新的数据。。对我来说，这个流程更适合应用程序，因为它降低了复杂性。对于较小的应用程序，可能需要为较小的功能做很多事情，但我认为在较大的应用程序中，使用这种方法可以提供更好的灵活性。我认为这是事实，在我看来，我们有智能组件和哑组件，但我们可以拆分为小型智能组件，而不是大型容器。是的，因为最初组件可能是哑的，但随着应用程序的增长，您可能需要传递更多的数据。现在，您有两种选择，一种是在父组件中创建更多属性，另一种是创建一个智能组件来处理这种情况。但在ngrx的情况下，由于您的子组件对其父组件的依赖性较小，您可以轻松地操纵数据以处理新的需求。我同意@daniel hoppe alvarez的观点，这不应该是答案。哑组件应保持哑，并且仅中继交互。拥有一个单一的真理来源并不能改变这个体系。