react 勉強メモ 4日目（react/redux）

Why Redux ??

- reactのコンポーネント内ではなくstoreでstateを管理できるので、全体の見通しがいい場所でstate管理できる

- どのコンポーネントからでもstateの参照/変更できる

- モジュールを疎結合（互いに依存性を持たず影響し合わない）にできる

- Reactだけでstate管理しようとするとイベント発生時の伝達が、親から子へ子から親へと、propsのバケツリレーが起きて大変

Fluxフロー

- データが一方方向に流れるReduxのもととなっているデータフロー設計の一つ

- イベント駆動でデータを変えていく

とにかく

この二つの記事を何度も読み返して理解する

たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita

Reduxが分からない人のためにReduxを概念から説明してみる - Qiita

とはいえ

誰が何者かを自分の言葉で整理することも大事だよねと言うことで

Component

- サイトの訪問者が直接見て触ることができる部分

- それぞれのcomponentがpropsを持つことができる

- reduxの設計ではstateは持たない

Container

- まとめてstoreと接続してくれる部分

- componentをまとめたcomponent

- いろんなComponentをまとめた一つのページ

Action

- 状態の変更に対する要求を状態を管理している人たちに要求を依頼してくれる部分

- 要はComponentの変更を受け取ってreducerに投げる

Reducer

- 変更を管理してくれる部分

- Actionから依頼を受け取ってそれに合わせて行うべき処理を決めてS指示する

Store

- 状態を保存してくれる部分

- Reducerから要求された処理通りに状態を変更して保存する

mapStateToProps, mapDispatchToProps

- Storeから渡った状態をContainerに渡す処理

- 状態の変化に応じて情報の変更伝えてあげる