React/状態管理のバックアップ(No.1) - PukiWiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ | ログイン ]

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
React/状態管理へ行く。
- 1 (2023-03-15 (水) 11:55:32)

アーキテクチャパターン †

Flux †

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ツリーを更新する