2015/09/10

React向けのアプリケーション - Flux

React向けのアプリケーション - Flux

Fluxの概念について勉強してみたかったので、色んな記事を読み漁り自分なりにまとめてみた。

Fluxの要素 1、View(ReactComponent) 2、Action 3、Dispatcher 4、Store

とりあえずこの4つを覚えればよいらしい。

1、View(React)

・Storeのデータを表示する。いわゆるView

2、Action

・ユーザーが行った操作がAction経由でDispatcherに届けられる。

3、Dispatcher

・Actionを受け付けて登録されたcallbackを実行し、Storeにイベントを通知する。すべてのデータは一旦Dispatcherを通る。

4、Store

・アプリケーションのデータと、ビジネスロジックを担当する。Storeのデータが更新された場合、changeイベントを発行してReactのコンポーネントツリーに更新を通知する。

flux-diagram-white-background.png https://github.com/facebook/flux ↑よくある図

処理の流れ

・Viewで発生したユーザーの操作がActionを経由してDispatcherを呼び出す。 ・DispatcherのコールバックとしてStoreの処理を呼び出す。 ・Storeは処理が終わるとChange Eventをemitする。 ・ViewはStoreのChange Eventをlistenしていて、Change Eventを受け取ると自身のstateを更新する。

以上。

まあ作ってみないとなんとも言えないので、とりあえず作ってみようと思う。 https://github.com/yhikishima/reactjs-env