Share state across pages

Search…
Only Use Sparsely: For components within a page, use reusable views instead.
Problem
Solution
1
import Brwoser.Dom exposing (Viewport)
2
import Time exposing (Posix)
3
​
4
type Model =
5
    Loading
6
        { viewport : Maybe Viewport
7
        , time : Maybe Posix
8
        }
9
    | LoginPage
10
        { loginForm : LoginForm
11
        , viewport : Viewport
12
        , time : Posix
13
        }
14
    | AdminPage
15
        { userId : Int
16
        , viewport : Viewport
17
        , time : Posix
18
        }
19
​
20
tyep Msg =
21
    UpdatedViewport
22
    | UpdatedTime
23
    | ..
24
​
25
update : Msg -> Model -> (Model,Cmd Msg)
26
update msg Model =
27
    case Msg of
28
        UpdatedViewport ->
29
            --How can i updated the viewport in a scaleable way?
30
            
31
        UpdatedTime ->
32
            --How can i updated the time in a scaleable way?
Copied!
1
import Brwoser.Dom exposing (Viewport)
2
import Time exposing (Posix)
3
​
4
type alias Config =
5
    { viewport : Viewport
6
    , time : Posix
7
    }
8
​
9
type Page =
10
    Login { loginForm : LoginForm }
11
    | Admin { userId : Int }
12
​
13
type Model =
14
    Loading
15
        { viewport : Maybe Viewport
16
        , time : Maybe Posix
17
        }
18
    | Ready ( Page , Config )
19
​
20
tyep Msg =
21
    UpdatedViewport Viewport
22
    | UpdatedTime Posix
23
    | ..
24
​
25
update : Msg -> Model -> (Model,Cmd Msg)
26
update msg model =
27
    case Msg of
28
        UpdatedViewport viewport ->
29
            case model of
30
                Loading m ->
31
                    {m | viewport = Just viewport}
32
                Ready (p,config) ->
33
                    ( p
34
                    , { config | viewport = viewport}
35
                    )
36
            
37
        UpdatedTime time->
38
            case model of
39
                Loading m ->
40
                    {m | viewport = Just time}
41
                Ready (p,config) ->
42
                    ( p
43
                    , { config | time = time}
Copied!
Question
How should I handle shared state between pages 
Answer
Define a config type and separate page definitions from the model definition.
Recipes - Previous
Writing a Single Page Application
Debounced Validation
Last modified 2yr ago
Copy link
Contents
Question
Answer