Elm Language The Elm Architecture Message tagging with Html.App.map
Example
Components define their own Messages, sent after emitted DOM Events, eg. CounterMsg from Parent-child communication
type CounterMsg
= Increment
| Decrement
| Reset
The view of this component will send messages of CounterMsg type, therefore the view type signature is Html CounterMsg.
To be able to reuse counterView inside parent component's view, we need to pass every CounterMsg message through parent's Msg.
This technique is called message tagging.
Parent component must define messages for passing child messages:
type Msg
= FirstCounterMsg CounterMsg
| SecondCounterMsg CounterMsg
| ResetAll
FirstCounterMsg Increment is a tagged message.
0.18.0
To get a counterView to send tagged messages, we must use the Html.App.map function:
Html.map FirstCounterMsg (counterView model.firstCounter)
0.18.0
The HTML.App package was collapsed into the HTML package in v0.18.0
To get a counterView to send tagged messages, we must use the Html.map function:
Html.map FirstCounterMsg (counterView model.firstCounter)
That changes the type signature Html CounterMsg -> Html Msg so it's possible to use the counter inside the parent view and handle state updates with parent's update function.
