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

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

type alias Config =
    { viewport : Viewport
    , time : Posix
    }

type Page =
    Login { loginForm : LoginForm }
    | Admin { userId : Int }

type Model =
    Loading
        { viewport : Maybe Viewport
        , time : Maybe Posix
        }
    | Ready ( Page , Config )

tyep Msg =
    UpdatedViewport Viewport
    | UpdatedTime Posix
    | ..

update : Msg -> Model -> (Model,Cmd Msg)
update msg model =
    case Msg of
        UpdatedViewport viewport ->
            case model of
                Loading m ->
                    {m | viewport = Just viewport}
                Ready (p,config) ->
                    ( p
                    , { config | viewport = viewport}
                    )
            
        UpdatedTime time->
            case model of
                Loading m ->
                    {m | viewport = Just time}
                Ready (p,config) ->
                    ( p
                    , { config | time = time}

Question

How should I handle shared state between pages

Answer

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