10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Elm SPA テンプレートを作った 2

Last updated at Posted at 2018-12-05

WARNING: This article is outdated and not maintained anymore.

前半: Elm SPA テンプレートを作った 1
elm-my-spa の解説を続けます。

全てのページで使用するデータの保持方法

例えばセッション情報。ログインユーザデータ、言語設定、 Ports から受け取った何らかのデータ。これらはどのページでも必要ですが、全体で共有すべきものです。どう保持したら良いでしょうか。

もう一度 Main の Model を見てみます。

Main.elm
type Model
    = NotFound Env
    | Index Env IndexPage.Model
    | View Env Id ViewPage.Model

各ページを表現していて、どのページを表示するか判断するのに使用しています。こいつに Env というモデルを渡しています。これが共有データ保管場所として機能しています。

Env.elm
type Env
    = Env Internals


type alias Internals =
    { key : Nav.Key
    }


create : Nav.Key -> Env
create key =
    Env (Internals key)


navKey : Env -> Nav.Key
navKey (Env internals) =
    internals.key

共有データを増やしたい場合は、 Internals にいくらでも突っ込めば良いんです。
Main.elm 内を env で検索すると、 Model の初期化時、Model の変更(ページ切り替え)時に、各ページの init 関数に Env を渡し、常に引き回していることが分かるかと思います。

まとめ

以上で elm-my-spa の解説を終わります。
今後もうちょっと拡張して、何かしらの API を叩くことで Http くらいは加えようかと思います。

10
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?