Msg causing Type issue

Learn
1

Hi, I am new to Elm and I am trying to build a blog post website. Since this blog has many pages in general, I have views for every page. I am slightly confused with Msg here.

An example is:
Page1:
view1: ModelA->Html AbcMsg
{let…
in…
}

Page2:
view2: ModelB -> Html Msg
{…
div [ ]
[view1] //error
}

The error I get is:
The div call produces:
Html AbcMsg

But the annotation on view2 says it should be Html Msg

But when I try to add Html AbcMsg instead of Html Msg, it gives new errors. How can I resolve this?

1 Like
2

Each page, if it has state, should have its own Model, Msg, update and view.

In Main.elm you should join the messages under a single name.

You can use the source code of the packages app as an inspiration or elm-spa-example.

3

Hi @pdamoc, thank you for your reply. I am aware that all the views shall be rendered into the Main file. But for example, If I have created a view1 which is like a dropdown and it needs to be added into my Layout which is view2, that’s where I am getting an error due to the Msg part as I have added AbcMsg in view1 but view 2 where the dropdown is added is needing Html Msg. When I try to change in any of the files, I get an error. Also, View2 is already added into the main file.

If possible, could you please check the example above and help what can be done? I checked the elm-spa-example but that didn’t quite help with this issue.

Awaiting your reply :slight_smile:

4

I suggest you start with an existing example. Or why not start with elm spa? Just way quicker than to completely understand Elm architecture, and wire it all up yourself.

5

In essence, you need to lift AbcMsg to Msg either using Html.map or passing down to the view a lift function that can be combined to produce the needed Msg

So, in your Msg you will have | FromAbcMsgToMsg AbcMsg (I made the tag more explicit, you can chose better names).

You would then write

view2: ModelB -> Html Msg
{…
div [ ]
[ Html.map FromAbcMsgToMsg view1 ]  
}

Please be aware that current recommendations are to use this pattern as the last resort. In other words, maybe you can avoid it by simply customizing view1 with the message handlers that it needs.

view1 : { fooHandler : String -> msg, barHandler : msg}  -> Html msg 
view1 {fooHandler, barHandler} = 
    div []
    [ input [ onInput fooHandler ][]
    , button [ onClick barHandler ][text "Some Button"]
    ]
4 Likes
6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.