Share state across pages
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.
Copy link