Share state across pages

Only Use Sparsely: For components within a page, use reusable views instead.
Problem
Solution
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?
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.
Last modified 2yr ago