elmのローカルスコープアップデート0.18

Question

私は、いくつかのページとルートを持つelm 0.18 Webアプリケーションを持っています。 main.elm私の更新機能を定義します。

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     FirstUpdateAction -> 
    ... 

すべてのアクションがこの機能を実行し、大きくなっています。全体構造内にネストされた小さなモジュールに更新機能を作成することは可能ですか？

たとえば、ユーザーにパスワードを変更できる設定ページがあります。 onInputおよびonBlurイベントに関連付けられた更新アクションを持つ3つのフィールド/状態（passwordOld、passwordNew、passwordConfirm）があります。これらのステートとアクションは、ユーザー設定ページとの関連性に過ぎず、ユーザーがページを離れるときにモデルの残りの部分に無関係になります。

ユーザー設定の有効範囲を設定するにはどうすればよいですか？

Answer 1

独自のMsgタイプ、更新、および表示機能を持つ独立したサブモジュールにコードを分解することができます。

module SubmoduleA exposing (Model, Msg, update, view) 

type Msg = SubMessageA 
     | SubMessageB 

     [..] 

type alias model = 
    { fieldA : TypeA 
    , fieldB : TypeB 
    , [..] 
    } 

update msg model = 
    case msg of 
    MessageA -> 
     {model | fieldA = [..] } ! [] 
    [..] 

view model = 
    div [id "submoduleAView"] 
     [..] 

このモジュールは、このようなあなたのメインプログラムに接続されます：あなたは、ファイルSubmoduleA.elmはこのように見えるかもしれない例えば

module Main exposing (..) 

import SubmoduleA exposing (Model, Msg, update, view) 

type Msg = MessageA 
     | MessageB 
     | ToSubmoduleA (SubmoduleA.Msg) 
     [..] 

type alias model = 
    { fieldA : TypeA 
    , fieldB : TypeB 
    , [..] 
    , subModuleA : SubmoduleA.Model 
    } 

update msg model = 
    case msg of 
    MessageA -> 
     {model | fieldA = [..] } ! [] 

    [..] 

    ToSubmoduleA msg = 
     let (newSubmoduleA, newSubmoduleACmd) = SubmoduleA.update msg (.subModuleA model) 
     in { model | subModuleA = newSubmoduleA } ! [Cmd.map ToSubmoduleA newSubmoduleACmd] 

view model = 
    div [id "mainView"] 
     [ .. 
     , Html.map ToSubmoduleA <| SubmoduleA.view (.subModuleA model) 
     ] 

このようなすべての情報と、状態があなたのサブモジュールにカプセル化されたままになっていて、メッセージの正しいルーティングを担当するメインの更新関数に1つのケースがあるだけです。