前回に引き続き、Elm-architectureの例を消化していきます。
例２ ペアカウンター
前回は単一のカウンターを作成しましたが、今回はペアのカウンターを作成していきます。
カウンターが２つということは、カウンターをモジュールした方が良さそうですね。
Elmの素晴らしいところは、まったく変更なしにコードを再利用できるところだそうです。
機能性を適切に露出させ、実装を隠すのが良いらしいですね。
ここで、CounterPairを作成します。
モデル
まずはモデルから。
モデルが２つのレコードを持っていますね。
新しいModelを作成する時はいつでも、init関数が必要です。
Action
次にActionを作ります。
アクションは「全てのカウンターのリセット、１つ目のカウンターの更新、２つ目のカウンターの更新」の３つになります。
ここで、Counter.Actionは、CounterのActionを指しているわけですがこのコードからは詳細はわかりません。
update関数を作った時に、Counter.Actionは適切に配置されます。
VIew
最後に、ビューを作成します。
２つのカウンターと、リセットボタンを表示します。
ここでも、Counter.viewが再利用されていますね。そこで、forwarding addressというものを作成しています。それぞれのカウンターの違いを明記しているようなもの。だとか。
ペアカウンターについては、これでおしまいです。
もちろん、PairCounterをさらに拡張して、PairPairCounterを作ることもできます。
ブラウザで確認するとこのとおり。きちんとカウンターが２つできていますね。
DEMO
http://chuck0523.github.io/JSPractise/elm/pair-counter/index.html
