fluxとフロントエンドアーキテクチャ

フロントエンドアーキテクチャについても整理する。

今モダンなアーキテクチャはFLUXなので、FLUXについての説明が多め。

値がストリームに流れるという考えがある。

ストリームの概念は以下の資料が良いが、どちらかというと最後にみた方が良いかもしれない。

“Reduxの概念をRxJSとTypeScriptで理解する ver.2”

Reduxの概念をRxJSとTypeScriptで理解する ver.2 - Qiita
Redux Advent Calendar 2016 の15日目です。ちきさんです。 前置きと反省 この記事は僕がQiitaに投稿した中で最もストックされてしまった Reduxの概念をRxJSとTypeScriptで理解する(初...

FLUXとは

Action→Dispatcher→Store→Viewという単一方向へのデータフロー。

これによって複雑性を減らし、大規模でもメンテナブルかつ堅牢なソフトウェアを実現させる。


あろえりーなさんの解説。

React+Fluxで正しく設計するためのFlux見直しガイド
Fluxを正しく設計するために公式ドキュメントと FluxUtils のソースを読み直したので知見をまとめてみました。「なんとなく理解している」から「ちゃんと理解している」にステップアップするためのFlux再入門話でもあります。

The Flux diagram: https://github.com/facebook/flux

“The difference between Flux and Redux”

The difference between Flux and Redux
It’s all about constraints

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されたもの。

Redux はもう辛くない。redux-aggregate - Qiita
Redux には多くの利点がありますが、避けられない課題があります。競合する状態管理ライブラリの比較を以下に記しました。あくまで個人的な三者相対表ですが、世論もほぼこれに近いのではないでしょうか。 Redux MobX Vu...

FluxのStoreにReducerという分割統治の仕組みを設けている。

これは読み直しておいた方が良い。

“React/Fluxにおける問題とReducerが切り開く道”
https://fa-works.com/blog/problems-with-flux

reducerでしてはいけないこと

ReduxのAction、Reducer、Storeの(個人的な)整理メモ - Qiita
はじめに 今更ながらですが、今個人的に作っているものにReact+Reduxを導入するついでに、いつでも確認できるように各役割についてのメモを残しておきます。間違いなどございましたら、コメントにてご指摘お待ちしておりますm(_ ...

以下は違うかもだけど、具体的な図で理解が進むかもなのではっておく。

Reduxが分からない人のためにReduxを概念から説明してみる - Qiita
TL;DR 要点だけ知りたい方は、最後の方だけ読めば大丈夫です。 背景:Reduxが全然わからないのでちゃんと勉強した 開発現場にReduxを導入しておきながら、チーム全員が「全然分からない。俺達は雰囲気でReduxをやっ...

Reduxへの不満

mizchiが過去に色々ツイートしている。

mizchi の Redux 考
まとめました

あとは、reduxがfacebook製ということもあり、でかいアプリケーションにフォーカスしている。

そのため、疎結合にするためにstepが多すぎて煩雑に感じやすい。スモールスタートに向かない。

それなのに、reduxのフローの各処理(action、actionCreator、reducer、mapStateToPropsなど)が実質的に密結合状態で、簡易に書くこともできない。

トレードオフがおかしい。

ReduxとuseReducerの違い

この図がすごいわかりやすい。

ベストな手法は? Reactのステート管理方法まとめ
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。 Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。 2020年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか? 状態管理の選択肢 Rea...


Reduxと非同期処理

redux-sagaで非同期処理と戦う - Qiita
はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという3つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフル...

Reduxとクリーンアーキテクチャ

“続・ぼくのかんがえたさいきょうのReact+Redux+CleanArchitecture”

続・ぼくのかんがえたさいきょうのReact+Redux+CleanArchitecture - Qiita
前回:ぼくのかんがえたさいきょうのReact+Redux+CleanArchitecture 前回のさいきょうパターンの検証結果 まずは前回のさいきょうパターンですが、会社内の勉強会で実装を進めて行ったところ、少し整理されてこの...

FLUXとゲーム

FLUXをゲームに応用した話だが、ここに出てくる図が、FLUXが以下に処理の流れをシンプルにしたかがわかる。

サーバーレスxFLUXアーキテクチャをお手軽に実装できるSignalRの破壊力| KDL BLOG
先日ニュース発信した、位置情報を使った体験型ゲームのアプリケーション開発において、AzureSignalRというサービスを利用してFLUXというアプリケーションアーキテクチャを応用してみました。FLUXとはFacebookが提唱しているアプリケーションの設計思想で、データの流れを単一方向に限定することを特徴としています...




その他

Elmとの関係

elmは関数型言語のアーキテアクチャ。reduxの作者は関数型脳とも言われている記述もあった。

The Elm Architecture · An Introduction to Elm

この図を参考にしていたらしい。

コメント