フロントエンドアーキテクチャについても整理する。
今モダンなアーキテクチャはFLUXなので、FLUXについての説明が多め。
値がストリームに流れるという考えがある。
ストリームの概念は以下の資料が良いが、どちらかというと最後にみた方が良いかもしれない。
“Reduxの概念をRxJSとTypeScriptで理解する ver.2”
FLUXとは
Action→Dispatcher→Store→Viewという単一方向へのデータフロー。
これによって複雑性を減らし、大規模でもメンテナブルかつ堅牢なソフトウェアを実現させる。
あろえりーなさんの解説。
The Flux diagram: https://github.com/facebook/flux
“The difference between Flux and Redux”
Reduxとは
React.jsと組み合わせて使う、FLUXを実現するためのライブラリ。フレームワーク。
https://qiita.com/syossan27/items/7e1b2e07ac68b96bdaa7
ただ、ReduxがFLUXといアーキテクチャパターンを実現する具体的なライブラリというと、正しくもあり間違ってもいる。
間違っている理由は、ReduxはFLUXという概念以外に以下が追加されていること。
- Single Source Store
- Reducer
- State in read-only
- Changes are made with pure functions
画像出典：https://staltz.com/unidirectional-user-interface-architectures.html
以下は、FLUXとREDUXの違いをわかりやすい図で解説してくれている。
https://qiita.com/syossan27/items/7e1b2e07ac68b96bdaa7
Reducerとは何か？
可換なpure function。副作用のない関数。副作用とは、stateに影響を及ぼすことなく、inputとoutputだけのもの。
vueではmutationはreducerを分解したもの。mutationは状態を変更する純関数。
redux-aggregateはvueなどからinspireされたもの。
FluxのStoreにReducerという分割統治の仕組みを設けている。
これは読み直しておいた方が良い。
“React/Fluxにおける問題とReducerが切り開く道”
https://fa-works.com/blog/problems-with-flux
reducerでしてはいけないこと
以下は違うかもだけど、具体的な図で理解が進むかもなのではっておく。
Reduxへの不満
mizchiが過去に色々ツイートしている。
あとは、reduxがfacebook製ということもあり、でかいアプリケーションにフォーカスしている。
そのため、疎結合にするためにstepが多すぎて煩雑に感じやすい。スモールスタートに向かない。
それなのに、reduxのフローの各処理（action、actionCreator、reducer、mapStateToPropsなど）が実質的に密結合状態で、簡易に書くこともできない。
トレードオフがおかしい。
ReduxとuseReducerの違い
この図がすごいわかりやすい。
Reduxと非同期処理
Reduxとクリーンアーキテクチャ
“続・ぼくのかんがえたさいきょうのReact+Redux+CleanArchitecture”
FLUXとゲーム
FLUXをゲームに応用した話だが、ここに出てくる図が、FLUXが以下に処理の流れをシンプルにしたかがわかる。
その他
Elmとの関係
elmは関数型言語のアーキテアクチャ。reduxの作者は関数型脳とも言われている記述もあった。
この図を参考にしていたらしい。
コメント