🎃

第5回 フロントエンドアーキテクチャを学ぶ

2021/11/14に公開約1,300字

読んだ記事

Fluxとはなんなのか
Fluxをちゃんと理解できているか知りたかったので、今回の題材にした。

内容の自分的解釈

MVCとMVVMの比較から。
MVCとMVVMの違いは1方向の更新(MVC、controller→model→view)なのか、双方向の更新(viewModelがViewから受け取ったデータをModelが受け取れる形に加工、更新)なのか。
MVVMではViewModelが増えるとそれに伴ってModelが一意になるかがわからなくなってしまうなど、データの流れが複雑になってしまう。
そこでFluxパターンが出てくる。
Fluxの登場人物は下記の通り。

  • Stores:アプリケーション全体のデータ、ビジネスロジック
  • View:UIコンポーネント
  • Actions:Viewから発火されるイベント
  • Dispatcher:アクションを受けてstoreへ発火させる

Action(Viewでユーザーが実行)をDispatcherが受け取り、Storeでデータを含めた処理、Viewファイルへ反映させるというのが簡単な流れです。
優れている点はDispatcherが全てのオペレーションをしていることで、Storeの変更は常にDispatcherを通じて行われるので、アプリの状態が予測可能になります。
要はどこで更新がされているかが見えるので楽という話です。

FaceBookのかつての論争についてのリンクは下記(MVC vs Flux)
Facebook の決断:MVCはスケールしない。ならば Flux だ。

ちなみにReduxとの違いは「Dispatcher」の存在有無になると思います。
Actionsを直接Storeへ渡してReducerがにゃんにゃんしてあげる形。
また、StateについてもObjectを再度生成する形をとっています(Fluxはstateへ直接変更をするが、Reduxはnew Stateを作成する)。
どっちが優れているかという論争はなくて、単純にFluxが簡易的になったのがReduxかなと思います。
MVC vs Flux vs Redux – The Real Differences

感想

Fluxについて改めてしっかり学べたと思う。
stateの取り回しについて色々考えたり悩んでいたので、ちょうど良い頭のリセットになった。
ついでに下記の記事も読んだが、とてもよかった(MVCとFluxはそもそも見ているとこが違う、FluxはVについて関心を寄せているという理解がすっときた)。
Fluxとは何か MVC, MVVMとの違いも含めて

Discussion

ログインするとコメントできます