#author("2023-03-15T02:55:32+00:00","default:admin","admin") *アーキテクチャパターン [#m5758e17] #author("2023-03-15T02:56:31+00:00","default:admin","admin") -[[結局FluxやらReduxやらって何なのか個人的なまとめ:http://qiita.com/syossan27/items/7e1b2e07ac68b96bdaa7]] -[[ReactとFluxとReduxについて順を追って整理する:https://hogehuga.com/post-1095/]] **Flux [#l6879070] *Flux [#l6879070] -Flux は Facebook が提唱したアーキテクチャパターン -データのフローが一方通行なのが特徴 [Action => Dispatcher => Store => View] => [Action ... -Action --ユーザイベントが発生した場合や、APIリクエストが完了した場合などに、状態をどのように変更すべきかという情報をまとめたもの -Dispatcher --ActionをStoreへ届けるためのもの -Store --アプリケーションの状態を管理するもの --Dispatcherのイベントを購読し、Actionに応じて状態を変更し、Viewに変更を伝える -View --Storeのイベントを購読し、Storeが更新されたら自身を更新する --Storeが管理しているデータをViewのstateとして使い、Storeが更新されたらsetStateを呼び出して子要素にpropsとして渡すことでDOMツリーを更新する *Redux [#fd176557] -[[【入門】ReduxでReactの状態管理をする!その使い方とメリットを解説。:https://ugo.tokyo/try-redux/]]