少し簡単になったRedux
少し簡単になったRedux
2022年6月23日
少し簡単になった Redux
React でデータを一括管理したい場合には、Redux を利用するのが一般的です。Redux は React 専用のデータ管理モジュールというわけではなく、Vue などでも利用可能な仕組みです。しかし、Vue の場合には、VUEX や Pinia などの使いやすいモジュールを利用するのが一般的です。VUEX や Pinia に比べると、Redux の設定は面倒で、初心者が躓くポイントの一つです。しかし、Redux Toolkit を活用すると、必要な設定も少なく、以前に比べると使いやすくなっています。React の基本の紹介が一通り終わったので、Redux Toolkit を利用した、Redux の活用法を何回かに分けてお届けします！
React でデータを一括管理したい場合には、Redux を利用するのが一般的です。Redux は React 専用のデータ管理モジュールというわけではなく、Vue などでも利用可能な仕組みです。しかし、Vue の場合には、VUEX や Pinia などの使いやすいモジュールを利用するのが一般的です。VUEX や Pinia に比べると、Redux の設定は面倒で、初心者が躓くポイントの一つです。しかし、Redux Toolkit を活用すると、必要な設定も少なく、以前に比べると使いやすくなっています。React の基本の紹介が一通り終わったので、Redux Toolkit を利用した、Redux の活用法を何回かに分けてお届けします！
React で Redux を利用するための設定
Vue の場合は、Vue のプロジェクトを作成する際に、VUEX や Pinia を利用する設定を選択すると、必要な設定をやってくれる為、あとはデータと、その処理を記述すれば利用可能で、比較的簡単にデータを一括管理できます。
一方で、React の場合、多くの場合は、自分自身でモジュールをインストールして必要な設定を行う必要があります。慣れてしまえば、それほど難しい物ではありませんが、初心者には何をやっているのか分かりにくいです部分も多く、Vue で利用する、VUEX や Pinia に比べるとハードルが高いと言われていました。
実際に必要な設定は大きく分けて以下の三つの設定です：
- ストア（store)の作成
- アクション(action)の定義
- 各アクションに対応した、ストアの更新処理（reducer）
を行う必要がありました。
ストア（store）は、一括管理するデータを管理する仕組みで、後で説明する「reducer」を登録したりする必要があります。アクション（action）は、一括管理しているデータを更新する処理の定義です。処理の名前と、処理に必要なデータなどを定義します。最後が「reducer」と呼ばれる仕組みで、各アクションに対応したデータの処理と、一括管理するデータなどを記述する物です。
実際に、一括管理したデータを使用するためにこうした、設定が必要になります。
Vue の場合は、Vue のプロジェクトを作成する際に、VUEX や Pinia を利用する設定を選択すると、必要な設定をやってくれる為、あとはデータと、その処理を記述すれば利用可能で、比較的簡単にデータを一括管理できます。
一方で、React の場合、多くの場合は、自分自身でモジュールをインストールして必要な設定を行う必要があります。慣れてしまえば、それほど難しい物ではありませんが、初心者には何をやっているのか分かりにくいです部分も多く、Vue で利用する、VUEX や Pinia に比べるとハードルが高いと言われていました。
実際に必要な設定は大きく分けて以下の三つの設定です：
- ストア（store)の作成
- アクション(action)の定義
- 各アクションに対応した、ストアの更新処理（reducer）
を行う必要がありました。
ストア（store）は、一括管理するデータを管理する仕組みで、後で説明する「reducer」を登録したりする必要があります。アクション（action）は、一括管理しているデータを更新する処理の定義です。処理の名前と、処理に必要なデータなどを定義します。最後が「reducer」と呼ばれる仕組みで、各アクションに対応したデータの処理と、一括管理するデータなどを記述する物です。
実際に、一括管理したデータを使用するためにこうした、設定が必要になります。
Redux Toolkit の登場で簡単に！
以前は、Redux のモジュールの本体（redux）と、React で Redux を利用する為の仕組み（react-redux）をインストールして、上で挙げた三つの設定を自分で行う必要がありました。
設定は、ある程度パターンがあって、そのパターンを覚えてしまえば簡単です。 それでも、初心者にはちょっと取りつきにくい部分も多く、面倒な設定でした。
また、実際に利用する際にも、データの更新や、非同期の処理結果を利用する場合などは、さらにミドルウエアなどを別にインストールして利用する必要がある場合もあって、そうした設定まで含めると結構面倒な実装の一つになっていました。
最近は、Redux Toolkit を利用すると、そうした最初の設定や、配列や JSON などのデータの中身の更新も、非同期の処理も VUEX や Pinia に近い感覚で利用できる様になっています。
初期設定は、
- ストア（store）の作成
- Reducer の作成
に集約できるようになりました。Reducer に、アクションも含めた形で処理をまとめられるようになったので、Redux を利用する為の設定はかなり簡単になりました。 また、データの更新も、裏方で 「immer」による処理が行われるようになっているので、immutable を余り意識しないで実装できるようになりました。さらに、非同期の処理も、「thunk」を組み込んだ処理を裏方でやってくれるので、こちらも設定が大幅に簡略化されました。
以前は、Redux のモジュールの本体（redux）と、React で Redux を利用する為の仕組み（react-redux）をインストールして、上で挙げた三つの設定を自分で行う必要がありました。
設定は、ある程度パターンがあって、そのパターンを覚えてしまえば簡単です。 それでも、初心者にはちょっと取りつきにくい部分も多く、面倒な設定でした。
また、実際に利用する際にも、データの更新や、非同期の処理結果を利用する場合などは、さらにミドルウエアなどを別にインストールして利用する必要がある場合もあって、そうした設定まで含めると結構面倒な実装の一つになっていました。
最近は、Redux Toolkit を利用すると、そうした最初の設定や、配列や JSON などのデータの中身の更新も、非同期の処理も VUEX や Pinia に近い感覚で利用できる様になっています。
初期設定は、
- ストア（store）の作成
- Reducer の作成
に集約できるようになりました。Reducer に、アクションも含めた形で処理をまとめられるようになったので、Redux を利用する為の設定はかなり簡単になりました。 また、データの更新も、裏方で 「immer」による処理が行われるようになっているので、immutable を余り意識しないで実装できるようになりました。さらに、非同期の処理も、「thunk」を組み込んだ処理を裏方でやってくれるので、こちらも設定が大幅に簡略化されました。
データを一括管理する理由は？
ところで、Redux などを利用して、データを一括管理事には理由があります。 通常の、React の「部品」で表示に関連したデータは、ステート管理を利用しています。これは、これまでの React の基本で紹介した通りです。このステート管理は、通報は「部品ごと」に行なっています。
つまり、違う「部品」の場合は個別にデータを管理する必要があります。ある表示の部品から別の部品を呼び出して利用する場合は、「呼び出す側（親）」と「呼び出される側（子）」の間でデータの受け渡しができることは React の基本で紹介した通りです。
しかし、複数の「部品」で同じようなデータを沢山共有する場合や、「親子関係」がない場合には、データの受け渡しが複雑になってしまう場合などがあります。
例えばユーザのログインの状態などは、複数のページで必要になる場合が多く、親子関係が直接ない表示の切り替えも起きます。そのような場合は、あるページでログアウトやログインして状態が変わった事を管理するのはページごと（部品ごと）に管理するよりは、一箇所でまとめて管理した方が全体の実装はわかりやすく、シンプルになります。
ある程度の規模の Web アプリになると、データを一括管理した方が都合が良い場合が多くなります。 こうした際には、Redux などを利用してデータを一括管理する様な実装が採用されます。
ところで、Redux などを利用して、データを一括管理事には理由があります。 通常の、React の「部品」で表示に関連したデータは、ステート管理を利用しています。これは、これまでの React の基本で紹介した通りです。このステート管理は、通報は「部品ごと」に行なっています。
つまり、違う「部品」の場合は個別にデータを管理する必要があります。ある表示の部品から別の部品を呼び出して利用する場合は、「呼び出す側（親）」と「呼び出される側（子）」の間でデータの受け渡しができることは React の基本で紹介した通りです。
しかし、複数の「部品」で同じようなデータを沢山共有する場合や、「親子関係」がない場合には、データの受け渡しが複雑になってしまう場合などがあります。
例えばユーザのログインの状態などは、複数のページで必要になる場合が多く、親子関係が直接ない表示の切り替えも起きます。そのような場合は、あるページでログアウトやログインして状態が変わった事を管理するのはページごと（部品ごと）に管理するよりは、一箇所でまとめて管理した方が全体の実装はわかりやすく、シンプルになります。
ある程度の規模の Web アプリになると、データを一括管理した方が都合が良い場合が多くなります。 こうした際には、Redux などを利用してデータを一括管理する様な実装が採用されます。
データを一括管理するメリット
同じデータを部品間で共有する場合は、データを一括管理しない場合には、基本的に各部品でデータのステート管理が必要になります。同じデータなので、同じ様なステート管理の記述をそれぞれの部品単位で記述する必要があります。つまり、同じ様な処理の記述を複数書かな k ればいけない事になります。
一方で、データを一括管理する場合には、処理自体は「Reducer」にまとめて書いておけば、一箇所で済みます。各部品では、必要な処理を呼び出してデータの更新や読み出しをするだけになるので、全体の見通しが良くなります。
ここで気をつける必要があるのは、特定の「部品」のみで利用するデータは、部品ごとに管理を行った方が良い場合が多く、共通で利用するデータは一括管理の方が都合が良い場合が多くなる事です。このため、部品ごとの管理か一括管理するかをうまくグループ分けして管理する事が重要になります。
同じデータを部品間で共有する場合は、データを一括管理しない場合には、基本的に各部品でデータのステート管理が必要になります。同じデータなので、同じ様なステート管理の記述をそれぞれの部品単位で記述する必要があります。つまり、同じ様な処理の記述を複数書かな k ればいけない事になります。
一方で、データを一括管理する場合には、処理自体は「Reducer」にまとめて書いておけば、一箇所で済みます。各部品では、必要な処理を呼び出してデータの更新や読み出しをするだけになるので、全体の見通しが良くなります。
ここで気をつける必要があるのは、特定の「部品」のみで利用するデータは、部品ごとに管理を行った方が良い場合が多く、共通で利用するデータは一括管理の方が都合が良い場合が多くなる事です。このため、部品ごとの管理か一括管理するかをうまくグループ分けして管理する事が重要になります。
まとめ
今回は、概念的なことを中心に Redux の概要を紹介しましたが、次回からは、Redux Toolkit を利用して実際に React で Redux を利用する方法を紹介する予定です。
Redux は難しいというイメージがありますが、Redux Toolkit を活用すると、Vue で、VUEX や Pinia を利用してデータを一括管理するのと同じ様な感じで Redux の利用が可能になります。以前に比べると、設定も簡素化されて、扱いやすくなっています。これまで苦手意識が強かった方も、意外に簡単に利用できると思いますので是非、この連載をご覧になって改めて試されては如何でしょうか？
今回は、概念的なことを中心に Redux の概要を紹介しましたが、次回からは、Redux Toolkit を利用して実際に React で Redux を利用する方法を紹介する予定です。
Redux は難しいというイメージがありますが、Redux Toolkit を活用すると、Vue で、VUEX や Pinia を利用してデータを一括管理するのと同じ様な感じで Redux の利用が可能になります。以前に比べると、設定も簡素化されて、扱いやすくなっています。これまで苦手意識が強かった方も、意外に簡単に利用できると思いますので是非、この連載をご覧になって改めて試されては如何でしょうか？
コメント
コメントを投稿