Modify common values across children in parent update function?

Request Feedback
1

I need constantly updated device sizes across various children (pages).
The approach I found working is to handle updates of the device size with one Msg in the update of the parent (main) and modify the children model directly from there:

SetScreenSize newSize ->
             let
                mailingModel =
                    model.mailingModel
                updatedModel =
                    { mailingModel
                        | deviceSize = Element.classifyDevice newSize
                    }
            in
                ( { model | mailingModel = updatedModel }, Cmd.none )

I see the downside that the update function of the children is no longer is the only function updating the childrens model and that mapping one parent message per child is no longer enough to make them work together.
Also I heard Evan say that there is no shortcut to updating a nested value because it usually hints to a bad design decision.

An alternative would be to add a updateDeviceSize msg to every single child and wire it up in the parent. That would be significantly more code and would also require the the knowledge that mapping one parent message to each child is not enough.

What do you think of this approach?
Are there other alternatives?

1 Like
2

Hello!

So, the first thing I’d be wary of for this approach is forgetting to add another case for another nested model that needs window size. That new model would just stop responding to size and it might be pretty subtle to figure out why.

The approach I’d take is to store the window size in the parent model and have window be a parameter for the view functions that need it. This is nice because then that view function is in effect saying “look, I need a window size to work properly” and there’s no subtle breakage that can occur.

If you’re basing things off of https://github.com/rtfeldman/elm-spa-example, I’d think about including window size in something like how sessions are handled there for pages.

Cheers!
Matt

1 Like
3

That is exactly the approach I have been looking for, also because I decreases state in the children!

Thank you Matt!

1 Like