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.