React Reduxをある程度理解したあと、下記のHPを読むと整理できます。
参考HP:
React Redux の難しかった点をできるだけシンプルに図解 - Qiita
これを踏まえたうえで備忘録を箇条書きにしてみました。
・Stateの更新は唯一Reducerだけが行うことができる
このあたりは、useState Hook と似ている。
[Javaでいうところのカプセル化とsetterの話に類似]
・Reducerは上記以外にも役割がある。
もう一つは、actionのタイプにより、stateをどのように変更するかを予め仕掛けておくことができる。
あとは、リスナーとしての機能があり、これは、createStoreメソッドの引数に入れることで、登録されます。ActionをStoreにDispatchすることで、そのActionのタイプを受け取るよう設定されているReducerが、初めて働き出す。
・Actionとは?
イベントハンドラでは、イベントを受けって、それを処理する仕組みがある。ただし、JavaScriptでは、ここが、非同期処理になっていない。[Java、Androidでは、あまり非同期とはいわないが、ボタン作るだけでも、リスナーを使用しており『非同期』となっている]
・React Reduxは、Stateの管理が目的であり、Storeのstateにどのコンポーネントでも直接アクセスができる点が強調されている。actionがあることで、どのコンポーネントで起こった出来事でも、関数の受け渡しする必要なく、Reducerで対処できる点も重要である。[すなわち、インタラクティブなページであれば、表示されている部品(ここではボタンを例にします)が、どの層のコンポーネントでjsx内でbuttonとして定義されてるか(html風の記載があるか)によって、関数を受け渡す必要性が出てきます。これが、下の下の層にbuttonが定義されてると、関数処理の記載と(一番上)、イベント発生の場所(一番下)が離れすぎで分かりにくくなります。]
浅く広いアプリケーションなら、redux は必要ないでしょう。
レイヤーが2層でも横に広いアプリケーションなら、同じ階層のコンポーネントにstateをわたすのには、一度親コンポーネントを通す必要があり、この際は、redux でもよいですが、これだけなら、他の状態管理のみのライブラリ(例えばzustand)を使えばよいでしょう。
レイヤーが3層以上になるようなら、redux を使うべきでしょう。
https://qiita.com/yokinist/items/07ff6f8392c06c07b491
さて、ここまでで、終了予定でしたが、
https://qiita.com/erukiti/items/1999467ac9c074f2b336
上記のHPに
に目が止まったので、上げておきます。
Reactをつかうことで、DOMを意識しないで良くなった。それを抽象化と言っています。
正直まだ、理解できないのですが、
抽象化というと、Reduxを導入することで、コンポーネントで表示される部品(ボタンなど)に依存しないactionという概念が作れるという意味で、さらに抽象化できていると思います。