Fluxフローとは
- データフロー設計の１つ
- データが常に１方向に流れる
- イベントによってデータが変化(イベント駆動)
Flux思想をreactの状態管理に適したライブラリー = Redux
Fluxフロー図
Container
⇨ Storeと接続されたコンポーネント
Action
⇨ 要求を受けて変更を依頼
Reducer
⇨ 変更を管理する
Store
⇨ 状態を保存する
mapState To Props / mapDispatch To Props
⇨ 状態をコンテナーに渡す
ReduxにおけるFluxフローの流れ
① ユーザーがwebページにアクセス
② URLに応じたContainerが表示される
③ Containerの中にComponentがあり、ユーザーが購入ボタンなどをクリックする
④ 購入ボタンなどをクリックするイベントが発生した時、Actionが実行される
⑤ Actionが状態の変更したい内容をReducerに伝える
⑥ Reducerは変更の内容を受けて内容をStoreに伝える
⑦ Storeで状態が変わったら、状態をmapState To Props / mapDispatch To Propsを通して、Containerに伝わる
⑧ Containerの中では、状態が変わり表示がされる
⑨ ①へ戻る
参考サイト
[日本一わかりやすいReact-Redux入門#3...Fluxフローは絶対に知っておいて]
(https://www.youtube.com/watch?v=so0JgVToRLk)