Reduxの仕組みをわかりやすく解説
Reactコンポーネント間でのデータの受け渡しは、しばしば「伝言ゲーム」のように感じられます。親から子へ、そして孫へとデータを渡していくことになります。アプリの規模が大きくなるにつれて、この管理は煩雑になっていきます。
Reduxはこれを解決します。Reduxは「信頼できる唯一の情報源（single source of truth）」を構築します。データが散在するのではなく、すべてが1つの中心的な保管庫に集約されます。
Reduxを理解するために、コーヒーショップを例に考えてみましょう。
The Store（保管庫） これはショップの台帳です。豆の在庫数、注文、スタッフのリストなどを記録します。
The Action（注文）
客がカウンターから勝手にラテを手に取ることはありません。まず注文をします。Actionとは、「何が起きたか」を記述するシンプルなオブジェクトです。
例: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer（バリスタ） 台帳を更新できるのはバリスタだけです。バリスタは「現在の状態（state）」と「新しい注文」を受け取り、それをもとに台帳の新しいバージョンを作成します。
The Dispatch（レジ係） レジ係は注文を受け取り、それをバリスタに渡します。Dispatchとは、ActionをStoreに送るための関数です。
なぜReduxを使うのか？
アプリが拡張され、ユーザープロフィールやショッピングカートなどが含まれるようになると、中央のStoreがあることでデバッグが容易になります。Actionの履歴を確認することで、「いつ」「なぜ」データが変更されたのかを把握できます。これは、ウェブサイトにおける「フライトレコーダー」のような役割を果たします。
まとめ：
• Action: 変更の内容を記述したメモ。 • Reducer: 変更を実行するロジック。 • Dispatch: Actionをロジックへと送るトリガー。
出典: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp