Kyle Chen's Blog

Action speaks louder than Words

0%

なぜ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 を通じて)。