なぜReduxを使用するのか？

1. React における「ローカルストレージ」の問題

• React のコンポーネント自体には state（状態）があり、これは各部屋にある小さなホワイトボードのようなものです。このホワイトボードはとても便利で、何かを書く（データを保存する）ことも、消す（データを更新する）ことも簡単です。

• しかし、複数の部屋がこのホワイトボードの内容を共有する必要があると、問題が発生します：

• 例えば、部屋 A に「ユーザーのログイン状態」が書かれている場合、部屋 B もユーザーがログインしているかどうかを知る必要があります。

• この場合、A 部屋から B 部屋に情報を渡す必要があります（props を使って）。でも、部屋がさらに増えて、A -> B -> C -> D というように、情報を渡し続けるのは非常に面倒です。

2. Redux が提供する「集中ストレージ」

• Redux の役割は、大きな倉庫を作り、すべての部屋（コンポーネント）が重要な情報をその倉庫に保存できるようにすることです。

• 各部屋が情報を必要とするときは、倉庫から直接取り出すことができ、情報を一つ一つ渡す必要はありません。

• 簡単な例を挙げてみましょう：

• あなたがコンビニを経営しているとしましょう。

• React の state の方法は、各レジ係（コンポーネント）が自分の現在の収支を記録することです。

• しかし、コンビニ全体の総収入を集計する場合、すべてのレジ係の記録を持ってきて、1つ1つ加算しなければなりません。

• Redux の方法では、すべてのレジ係（コンポーネント）が同じ帳簿（Redux 倉庫）に記帳します。そして、総収入を知りたいときは、帳簿を確認すれば良いのです。

3. Redux の核心機能

• Redux はいくつかのシンプルで強力な機能を提供します：

• 統一ストレージ（Store）：中央の倉庫のようなもので、すべてのデータがここで一元管理されます。

• アクション（Action）：倉庫のデータを更新したい場合は、「アクション」を発行する必要があります。これは、何を変更するかを示す申請書のようなものです。

• リデューサー（Reducer）：すべての更新は事前に定められたルールに従って行われ、各変更が予測可能で管理可能であることを保証します。

4. Redux を使った実際のプロジェクトでの利点

• 例えば、あなたが eコマースサイトを開発しているとしましょう。以下の機能があります：

• ユーザーがログインした後、ショッピングカートにはユーザーのアイテム数が表示されます。

• 他のページ（例えば、注文ページ）でも、ユーザーのログイン状態やカートの内容を知る必要があります。

• ユーザーがカートページで商品を追加した場合、決済ページにもすぐにそのデータを更新しなければなりません。

• もし Redux を使わない場合、次のようにする必要があります：

• ショッピングカートページで state を更新します。

• その後、props を使ってデータを結算ページに渡します。

• しかし、Redux を使うと、次のように簡単になります：

• ショッピングカートページで「商品を追加する」というアクション（Action）を送信します。

• Redux はそのアクションに基づいて倉庫のデータを更新します（Reducer）。

• 他のページ（例えば、決済ページ）は自動的に最新のデータを取得します。なぜなら、それらは直接倉庫に接続しているからです（connect を通じて）。