愚蠢的组件应该如何“愚蠢”?

时间:2016-07-25 22:22:02

标签: angular redux ngrx

我正在使用智能/转储组件构建我的Redux(NgRx)应用程序,但我正在努力决定愚蠢的组件应该是多么“愚蠢”......

例如,我有智能组件posts),其中包含哑组件post-list),其中包含哑组件post)。直到这里一切都很好看。

要显示某些按钮,我需要知道用户是否为admin,我需要将属性adminposts一直传递到post }。

我可以将哑组件post连接到商店,直接从哑组件中获取它。或者在这种情况下组件是否更愚蠢? 它看起来像这样:

  private admin$: Observable<boolean>;
  constructor(private store: Store<AppState>){
    this.admin$ = this.store.let(isAdmin());
  }

我认为这样可以节省大量的冗余。这是好事还是坏事?

3 个答案:

答案 0 :(得分:6)

哑组件应该是没有任何逻辑的表示组件。

根据Dan Abramov Redux的作者,哑组件符合以下标准:

  • 关注事物的外观。
  • 可以在里面包含表示和容器组件**,并且通常有自己的DOM标记和样式。
  • 通常允许通过this.props.children进行遏制。
  • 不依赖于应用程序的其余部分,例如Flux操作或商店。
  • 不指定数据的加载方式或变异方式。
  • 仅通过道具接收数据和回调。
  • 很少有自己的状态(当他们这样做时,它是UI状态而不是数据)。
  • 除非需要状态,生命周期挂钩或性能优化,否则将被编写为功能组件。
  • 示例:页面,补充工具栏,故事,用户信息,列表。

角度

他们应该只显示信息并按输入和输出流处理事件。

所以我的建议是在智能和哑巴上检查ngrx示例应用程序:https://github.com/ngrx/example-app

此外,你可以看到我在游戏中如何实现聪明和愚蠢的实施https://github.com/wizardnet972/tic-tac-toe

注意:容器组件也可以重复使用。组件是表示组件还是容器组件是实现细节。

演示组件通过@Input()接收数据并通过@Output()传递事件,但通常不保持自己的内部状态。所有决定都委托给容器&#39;容器&#39; smart&#39;数据更新之前的组件流回来。

希望有所帮助。

答案 1 :(得分:1)

这个问题适用于任何客户端框架,包括React / Flux以​​及传统的Angular 1.x应用程序(通常通过https://github.com/angular-redux/ng-redux之类的东西)和许多事情一样,答案是它取决于你的用例。

你已经问了两个问题。愚蠢的组件应该是多么愚蠢,以及如何最好地确定组件是否应该首先是哑巴。

问题1:如何最好地确定某个组件是否应该首先变得愚蠢:

在您的具体情况下,我会问一个问题:帖子列表或帖子组件是否会在帖子之外使用?是这样,做出最高水平&#34;智能组件(也称为容器)。例如,如果Post仅在帖子列表中使用,但帖子列表可以在帖子之外使用,那么帖子列表应该是智能组件,允许您只是“删除”#34;它更容易进入其他组件。

这虽然证明了一般方法。询问一个愚蠢的组件是否可能存在于其上面或作为其智能组件的兄弟,如果是,则提升它,如果不存在,则将其作为一个愚蠢的组件。

问题2:如何&#34;哑巴&#34;应该是一个愚蠢的组成部分:

一个愚蠢的组件需要传递任何更改的内容,并且作为最佳实践,可以根据用户操作调用可能发生的任何事件

例如:如果文本,图像或媒体基于应用状态的更改,则应将此数据传递给组件。如果存在按钮,链接,表单或其他可点击元素,至少传递可选的回调/方法来为这些元素调用将为您的组件的用户提供未来的灵活性(即使它是您的)应用程序需求增长。

答案 2 :(得分:1)

我认为'哑'可以在不同的背景下重复使用。

Dumb只会对它的父母感兴趣。

一句咒语我用角度2重复自己。如果它变得复杂和混乱,重新考虑我的策略。

其他级别的组件怎么样?管理员模式是一个孩子,非管理员是另一个孩子。这些子组件可以通过Input获取数据,并通过Output发出。