Redux
https://gyazo.com/d4386893c02cadbde7acde5261e0714f
Redux is a predictable state container for JavaScript apps.
Read Me - Redux
Fluxの実装の一つ。Reactと合わせてよく利用される
Reactで使う場合はReact Reduxをつかうのがいい
ステートの管理に問題を抱えていなければ、学ぶ必要はない
モチベーション
SPAが複雑化したのでステート管理が重要になった
ここでステートとは次のようなものを指す
サーバのレスポンス
キャッシュされたデータ
クライアントで作られてまだサーバで永続化されてないデータ
UIの状態管理も複雑化した
active routeの管理、選択されたタブ、スピナー、ページネーションとか
mutationと非同期性が交じるとはちゃめちゃになる
メントスとコーラがそれぞれだとうまいのに、まぜるとやばくなるのと同じ
じゃあどうするか?
Reactは「非同期性」と「直接のDOM操作」をなくしてビューのレイヤーでこの問題を解決しようとしてる
それでも、アプリ固有データの状態管理は君がやらなきゃならない。これに対応するためにReduxを使う
Reduxはどう働くか?
いつ・どのように更新がおきるかという制約を課すことで、mutationを予測可能にしようとする
FAQを読むとよりモチベーションがわかる
If you do not have problems with state management, you might find the benefits of Redux harder to understand. Some UI libraries (like React) have their own state management system. If you are using one of these libraries, especially if you are just learning to use them, we encourage you to learn the capabilities of that built-in system first. It might be all you need to build your application.
If your application becomes so complex that you are confused about where state is stored or how state changes, then it is a good time to learn Redux. Experiencing the complexity that Redux seeks to abstract is the best preparation for effectively applying that abstraction to your work.
https://blog.nnn.dev/entry/2022/04/08/170000
他の画面の実装を進めるうちに妙な問題が見つかるようになってきました。Action や Reducer の実装を面倒がってか、不必要に状態を共有してしまうようになったのです。
Redux のよくある苦しみは、Action や Reducer といった複数の実装を用意しなければいけないことです。
このあたりには Redux Toolkit などが取り組んでいますが、
そもそも GET リクエストをしてその結果を受け取りたいだけの画面に、Action を中心にしたイベントソーシングによる予測容易性は過剰品質でした。
解説
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
Redux Tutorial: Learn Redux from Dan Abramov on egghead
reduxのco-authorのDan Abramovによるチュートリアル
Dan AbramovのRedux講義
なぜReduxを使うのか