【GW】ES6、React、Flux、Reduxに触れてみた(2)

前回の記事の続き、Fluxについて

 

■Flux

フロントエンド開発の新しいアーキテクチャ

Reactと組み合わせ既存のMVCの課題を解消するアプリケーション全体のアーキテクチャである。

アーキテクチャの図はネットにいっぱいあるのでそちらを参照。

 

FluxはMVCと同じく責務の分割とオブザーバーパターンを基本としたアーキテクチャ

MVCと異なるのは、データフローが常に一方通行になるように制約がある。

 

・メリット

MVCなのにデータフローが一方向

イベント発生に合わせてどんな処理がどこの部品として実装すべきかが明確

再利用性、テストの容易性

 

Fluxのアーキテクチャに存在する役割をReactと絡めて簡単に説明

・Store

ReactのStateで扱うデータの抽象化をしている

StoreはReactの親コンポーネントから監視されている。

Storeの更新はStoreのみが行いかつ同期処理で行う。

・Dispatcher

Actionを受け取り、Storeに配送する

・View

React。

Storeをルートコンポーネントで監視するのが定番

・Action

Actionを識別子はアプリケーションの振る舞いのインタフエースを表現

 

非同期処理やHTTPの呼び出しはActionをトリガーにする。

Storeの独立性意識し、再利用しのために制約を守る

 

■参考

 

WEB+DB PRESS Vol.86

WEB+DB PRESS Vol.86

 

 

 

WEB+DB PRESS Vol.87

WEB+DB PRESS Vol.87

 

 

■手を動かす

写経して適当に動かす。

GitHub - hatahata12/study-react: study repository

 

■動作環境

Node.js

Babel

Browserifyやwebpack

 

Browserifyは依存解決のひとつとしてJavaScriptを生成することが目的。

webpackは最適化したアセットの配布を目的

 

どちらもトランスパイラはBabelに任せる

ES6 ➡︎ ES5

JSX ➡︎ js

 

次はReduxについて