The idea of smart and dumb components in Elm

Question

I like React's/Redux' concept of smart and dumb components, where a dumb component does not handle its own state (Dump component does not know anything about the outside world, all it does is triggering an event and displaying value according to its input). This is trivial because all state in handled in one place (main reducer).

In Elm, each component has its own 'update' function (similar to Redux' reducer), so it does not seem trivial to use the same (dumb & smart components pattern).

Is using smart & dump components a good practice in Elm? If so, will I have components without 'update' method? I wonder how will I pass data (props) to my component and how will I trigger events to the parent component.

I will love to hear your thoughts.

Answer 1

The Elm equivalent of a "dumb component" (a.k.a. Presentational, Pure, Skinny component) is simply a function that produces Html:

view : ... -> Html

The elm-html library is written in this style, e.g.,

button : List Attribute -> List Html -> Html

You set the "props" by providing attributes when you call the function. In particular, you register events by supplying handlers in List Attribute:

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

You'll see this pattern also in other libraries, although the exact types may be different from List Attribute and List Html.