counter.md

Counter

はじめに

今回のサンプルではデータフローを理解することに重点を置いて説明します。 実際にサンプルコードを写経しながら説明を読むと、理解が深まると思います。

イベント発生後のコードを読んでいく順番は以下のとおりです。これを念頭に置いてはじめましょう。

store.dispatch()->Action->Reducer->Componet:render()

Component

BaseComponent

• すべてのComponentはBaseComponentを継承する前提でつくられます

import

constructor

constructor(selector, store, ...stateNames)

• selector: ComponentのDOMのクラス名またはID

• store: rootReducer

• ...stateNames: 監視するstate（文字列）

• ...stateNamesで指定したstateに変更があったら子クラスで実装したrender()を実行する機能を提供します

constructor()

役割

• イベントハンドラのセット
• render()で使用するセレクタがある場合は定義しておく

this.$result = this.$selector.find('.js-result');
this.$selector.find('.js-increment').on('click', () => this.dispatch(actions.increment()));
this.$selector.find('.js-decrement').on('click', () => this.dispatch(actions.decrement()));

super(selector, store, 'result');は、 stateのresultに変更があったらrender()を実行するように定義している。 イベントハンドラのセットではclickイベントが発生したらstore.dispatch()を実行するようにしている。

render()

役割

• stateの変更に伴う画面の再描画を行う

render() {
  this.$result.text(this.state.result);
}

Action

役割

• ReducerにActionTypeを渡している

ActionType import:3-4

ActionCreator import:6-7

Reducer

役割

• Actionから受け取ったActionTypeによってstateを新規に返す

import:4-9

stateの値が変更されるとBaseComponentのconstructorで定義したstore.subscribe()が実行される仕組みです。

おわりに

今回のサンプルではデータフローをわかりやすくするために必要最低限の機能しかもっていませんでした。 他のサンプルではActionにデータを渡して画面に反映させたり、非同期処理を行う場合はどうするかを説明していきますので、引き継ぎ頑張りましょう。