Reduxの仕組みを抽象化

データ更新構造の全体像

意図を伝える

「何をしたいか」を明確に表す。

計算する

現在のデータ（状態）に基づいて、新しいデータを計算する。

置き換える

古いデータを新しいデータで置き換える。

Reduxを抽象化した構造

Action（アクション

「何をしたいか」を伝える命令。

変更の意図や「要件」

Reducer（リデューサー）

現在の状態と命令を受け取り、

新しい状態を計算する純粋関数。

計算機。

現在のデータ＋意図→新しいデータ

Store（ストア）

アプリ全体の状態を一元管理する場所。

データの倉庫

データ更新の具体的な構造

1.Actionを定義する（意図を伝える）

「このデータをこう変更したい」という命令を定義。

抽象的には:

Actionは「要求」であり

状態に直接触れない。

例: 「カウントを+1してください」というメッセージ。

2.Reducerで新しい状態を計算する

現在の状態とアクションを元に、新しい状態を計算。

抽象的には

Reducerは状態の「計算ルール」であり、

外部に影響を与えない（純粋関数）

例: 「カウントに1を足す」という処理。

3.Storeに新しい状態を保存する

Reducerで計算された結果（新しい状態）をStoreに反映。

抽象的には

Storeは「データの倉庫」であり、最新の状態を記録する。

コンポーネントはこの状態を監視し、自動的に更新される。

Reduxは、「一方向データフロー」としてモデル化できます

1.UI（ユーザーの操作）

ボタンやフォーム入力などが発生。

「Action」という形で操作意図を抽象化して生成。

2.Action → Reducer

ActionがReducerに渡され、現在の状態を基に「新しい状態」を計算。

3.Reducer → Store

新しい状態がStoreに保存される。

4.Store → UI

Storeが変更されると、UIが更新される

（Reactなら再レンダリング）。