CODEWITHSUNDEEP
elm
Yaniv Efraim
Yaniv Efraim

Reputation: 6713

The idea of smart and dumb components in Elm

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.

Upvotes: 5

Views: 220

Answers (2)

Søren Debois
Søren Debois

Reputation: 5688

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.

Upvotes: 4

Simon H
Simon H

Reputation: 21005

Another Smart/Dumb distinction you can make is between components that return Effects and those that don't. But to answer your question...

Nothing stops you defining actions in a child 

type Action 
  = Submit
  | Click

and in the Parent view having 

Child.view (Signal.forwardTo address ChildAction) props

(We pass props because there is no model data as such to pass)

but then handling all the actions in the Parent's update:

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

This would be essential anyway if the impact of an Action in Child was to change the state in Parent or some other child of Parent.

Upvotes: 3

Related Questions