子组件的 NGRX 和状态管理

Question

目前正在重构 Angular 应用程序以使用 ngrx 存储并有两个选项。这是我们应用程序的基本结构。我相信大多数 Angular 应用程序都是以相同的方式构建的：

AppComponent
|-- ContainerComponent
    |-- ChildComponent1
    |   |-- GrandChildComponent
    |       |-- GrandGrandChildComponent
    |-- ChildComponent2

ContainerComponent 已注入Store<AppState>. 我试图解决的问题是 GrandGrandChildComponent（例如 DropDownMenu 组件）必须根据应用程序的状态更改其行为（即在商店中发生的某些情况下禁用某些菜单项）并在单击时发出事件在菜单项上ContainerComponent（或任何其他组件，不是必需的祖先）可以对它做出反应。

有几种解决方法：

1. 使用@Input/在组件之间进行通信@Output
2. 注入Store任何需要了解状态的组件

选项 1 是我在文档中读到的最常见/推荐的模式。所以只有 ContainerComponent 是胖的，所有的孩子都是瘦/哑的，并且依赖于通过@Input.

但是从我看来，这种方法增加了很多样板，您必须添加不必要的属性才能将状态传递给 Grand Child 组件。而且它打破了关注点分离原则，因为任何中间组件都必须知道下面的组件需要什么。如果知道只有在 Grand Components上可用的细节，那么制作通用组件并不容易。

另一方面，方法 2 似乎解决了分离关注点的问题，而且它的实现似乎也更清晰。但由于我在使用方面相对较新redux模式方面我不确定这是否是可行的方法，也许我不知道当我在重构中过于深入时可能会遇到任何陷阱。

IMO，这两种方法都提供了一种对每个组件进行测试的简单方法，这对我来说非常重要。

我怀疑采取哪种方法。我应该注意哪些陷阱？

谢谢

Answer 1

以下是 redux 的创始人 Dan Abramov（ngrx 受到 redux 的启发，因此很多相同的想法也适用于 ngrx）就该主题所说的话：

\n\n

\n

何时引入容器？我建议您首先开始仅使用演示组件构建应用程序。最终您\xe2\x80\x99会意识到\n您向中间组件传递了太多的道具。\n当您注意到某些组件\xe2\x80\x99不使用它们收到的道具\n而只是将它们向下转发时并且每当孩子需要更多数据时，您都必须重新连接所有这些中间组件，这是引入一些容器组件的好时机。通过这种方式，您可以获取叶组件的数据和行为属性，而不会增加树中间不相关组件的负担。这是一个持续的重构过程，因此不要尝试第一次就把它做好。当您尝试此模式时，您将对何时提取某些容器产生\n 直观的感觉，就像您知道何时提取函数一样。

\n

\n\n

来源：\n https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#7dc5

\n