榆树中智能和愚蠢组件的想法

Question

我喜欢React的/ Redux'智能和哑组件的概念，其中一个哑组件不处理它自己的状态（转储组件对外部世界一无所知，它只是触发一个事件并显示值根据它的输入）。这是微不足道的，因为所有状态都在一个地方处理（主减速器）。

在Elm中，每个组件都有自己的“更新”功能（类似于Redux的减速器），因此使用相同的（哑和智能组件模式）似乎并不容易。

使用smart＆amp;转储组件是榆树的好习惯吗？如果是这样，我会有没有“更新”方法的组件吗？我想知道如何将数据（道具）传递给我的组件，以及如何触发事件到父组件。

我很想听听你的想法。

Answer 1

Elm等同于“哑组件”（a.k.a。Presentational, Pure, Skinny组件）只是一个产生Html的函数：

view : ... -> Html

elm-html库以此样式编写，例如

button : List Attribute -> List Html -> Html

通过在调用函数时提供属性来设置“props”。特别是，您通过在List Attribute中提供处理程序来注册事件：

button
  [ onClick addr ClickAction ]  -- event handler
  [ text "Click me" ]           -- child "components"

您会在其他库中看到此模式，但具体类型可能与List Attribute和List Html不同。

Answer 2

您可以做出的另一个智慧/愚蠢的区别是返回Effects的组件和不返回组件的组件。但要回答你的问题...

没有什么可以阻止你在孩子中定义行动

type Action 
  = Submit
  | Click

并且在父view中有

Child.view (Signal.forwardTo address ChildAction) props 

（我们通过props，因为没有模型数据可以通过）

然后处理父update中的所有操作：

case action of 
  ChildAction act ->
    case act of 
      Child.Submit -> 
        ...
      Child.Click -> 
        ...

如果“儿童行动”的影响是改变父母或其他父母子女的状态，那么这一点至关重要。