reduxとは
state管理Javascriptライブラリ。actionというイベントを使用してアプリケーション stateを管理および更新するためのパターンおよびライブラリです。 アプリケーション全体で使用する必要があるstate(global state)に対する中央集中式ストレージとしての役割を果たします。
reduxの3つの原則
1. Single source of truth global state は single store に保存される2.State is read-only reactではsetState()を通じてのみstate変更が可能ですが、
reduxではationというobjectを通じてのみstate変更が可能である。
3. Changes are made with pure functions 変更は純粋関数としてのみ可能であることを意味し、stateが異常な値に変更されることがないように、 純粋関数で作成されなければならない。
reduxを使う理由
reactから子コンポーネント間のダイレクトデータの配信はできません。この場合は、stateを管理する親コンポーネントを介してやり取りします。
しかし、子供が増えると、state管理はかなり複雑になります。
そして、props drillingの問題も発生する可能性があります。 これらの問題を解決するためにreduxを使用します。
global state ストレージを提供し、どこからでもストレージにアクセスしてデータをやり取りできます。
redux concept
同じstateを共有して使用しなければならないコンポーネントが複数ある場合、特に該当コンポーネントがアプリケーションの他の部分に存在する場合は複雑性が増加します。
時々この問題を"lifting state up"で解決できますが、常に役に立つわけではありません。
これを解決する一つの方法は、コンポーネントでshared stateをコンポーネントツリーの中央に配置することです。
これにより、ツリーにあるコンポーネントはこのstateにアクセスできます。
redux term
actionどのような動作をするか、オブジェクト形態で定義します。
actionはjavascript オブジェクトであり、必ずtypeフィールドを持ちます。 そしてpayloadというフィールドを使って具体的な値を作成します。
reducer
reducerは現在のstateとactionを受信し、新しいstateを返す関数です。
reducerは現在のstateを直接修正することはできず、コピーされた値を変更する必要があります。
actionはreducerを通じてstoreに伝達されます。 reducerがactionの詳細を見てstoreをアップデートします。
store
stateはstoreというオブジェクトに保存されています。
dispatch
reducerにactionを伝達してくれる関数です。
stateをupdateする唯一の方法はstore.dispatch()を呼び出し、actionを伝えることです。
storeは了知されたreducerの機能を実行して新しいstate値を保存します。
dispatch==triggering an event
redux flow
1. actionが発生2. storeにactionをdispatch(派遣)
3. storeは現在のstateとactionとともにreducer()を実施します。 そして、新しいステートを返します。
4. storeは購読されたuiのすべてにstateがアップデートされたと通知します。
参考
https://www.geeksforgeeks.org/whats-the-typical-flow-of-data-like-in-a-react-with-redux-app/
https://www.freecodecamp.org/news/what-is-redux-store-actions-reducers-explained/
https://redux.js.org/tutorials/index