Share state across pages

Only Use Sparsely: For components within a page, use reusable views instead.

Problem

import Brwoser.Dom exposing (Viewport)
import Time exposing (Posix)

type Model =
    Loading
        { viewport : Maybe Viewport
        , time : Maybe Posix
        }
    | LoginPage
        { loginForm : LoginForm
        , viewport : Viewport
        , time : Posix
        }
    | AdminPage
        { userId : Int
        , viewport : Viewport
        , time : Posix
        }

tyep Msg =
    UpdatedViewport
    | UpdatedTime
    | ..

update : Msg -> Model -> (Model,Cmd Msg)
update msg Model =
    case Msg of
        UpdatedViewport ->
            --How can i updated the viewport in a scaleable way?
            
        UpdatedTime ->
            --How can i updated the time in a scaleable way?

Solution

Question

How should I handle shared state between pages

Answer

Define a config type and separate page definitions from the model definition.