Redux備忘録

React Reduxをある程度理解したあと、下記のHPを読むと整理できます。

 

参考HP:

React Redux の難しかった点をできるだけシンプルに図解 - Qiita

 

これを踏まえたうえで備忘録を箇条書きにしてみました。

 

・Stateの更新は唯一Reducerだけが行うことができる

  このあたりは、useState Hook と似ている。

  [Javaでいうところのカプセル化とsetterの話に類似]

・Reducerは上記以外にも役割がある。

 もう一つは、actionのタイプにより、stateをどのように変更するかを予め仕掛けておくことができる。

 あとは、リスナーとしての機能があり、これは、createStoreメソッドの引数に入れることで、登録されます。ActionをStoreにDispatchすることで、そのActionのタイプを受け取るよう設定されているReducerが、初めて働き出す。

 

・Actionとは?

  イベントハンドラでは、イベントを受けって、それを処理する仕組みがある。ただし、JavaScriptでは、ここが、非同期処理になっていない。[JavaAndroidでは、あまり非同期とはいわないが、ボタン作るだけでも、リスナーを使用しており『非同期』となっている]

 

・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という概念が作れるという意味で、さらに抽象化できていると思います。