Redux ツールキット: React Thunk および React Saga。Vishal Tiwari から学びます。-jsチュートリアル-php.cn

Redux ツールキット: React Thunk および React Saga。Vishal Tiwari から学びます。

Patricia Arquette

リリース： 2024-10-19 14:32:31

オリジナル

286 人が閲覧しました

Redux toolkit: React Thunk and React Saga.Learn from Vishal Tiwari.

React Thunk と React Saga は、React アプリケーションの副作用を処理するため、特に API 呼び出しなどの非同期操作を管理するためのミドルウェアライブラリです。どちらも Redux で一般的に使用されますが、目的とアプローチが若干異なります。

反応サンク

1. 概要:

React Thunk は、アクションオブジェクトの代わりに関数を返すアクションクリエーターを作成できるミドルウェアです。これは、API リクエストや複雑な同期ロジック (アクションの条件付きディスパッチなど) などの非同期操作を処理する場合に便利です。返された関数は引数としてdispatchとgetStateを受け取り、他のアクションをディスパッチしたり、関数内の現在の状態にアクセスしたりできるようにします。

2. 主要な概念:

ミドルウェア: サンクは、関数 (サンク) を処理するストアの機能を拡張するミドルウェアです。
非同期アクション: サンクを使用すると、アクションのディスパッチを遅らせたり、特定の状態またはロジックに基づいて条件付きでディスパッチしたりできます。
シンプル: サンクは比較的単純なので、ほとんどのユースケースで簡単に使用できます。

3. 仕組み:

通常、アクション作成者はプレーンな JavaScript オブジェクト (アクション) を返します。
サンクを使用すると、アクション作成者はディスパッチと getState を受け取る関数 (「サンク」) を返すことができます。この関数内で、非同期ロジック (API からのデータのフェッチなど) を実行し、実際のアクションをディスパッチできます。

4. 例:

React アプリで redux-thunk を使用する基本的な例を次に示します。

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

ログイン後にコピー

5. サンクの利点:

シンプルさ: サンクは理解と実装が簡単です。
設置面積が小さい: 軽量で、複雑な構成は必要ありません。
ディスパッチを直接制御: アクションをいつどのようにディスパッチするかをより詳細に制御できます。

6. 欠点:

拡張が難しい: 複雑な非同期フローの場合、入れ子になったロジックと多数のディスパッチ呼び出しにより、サンクが乱雑になる可能性があります。
構造が少ない: サンクは副作用を管理するための特定の構造を強制しないため、適切に処理しないとコードの不整合が生じる可能性があります。

リアクトサーガ

1. 概要:

React Saga は、ジェネレーター関数 を使用して、より体系的に副作用を処理できるようにするミドルウェアです。サンクのような関数を返す代わりに、「エフェクト」システムを使用して非同期操作を管理し、ロジックのフローを制御します。 Saga は、ディスパッチされたアクションをリッスンし、API 呼び出し、データの取得、その他のタスクなどの副作用を実行できる、長時間実行されるバックグラウンドプロセスです。

2. 主要な概念:

ジェネレーター関数: サーガは、ES6 ジェネレーター関数 (関数*) を使用して実装されます。これにより、同期的に見える非同期コードを作成できます。
ウォッチャーとワーカー: サーガは、多くの場合、「ウォッチャー」サガ (ディスパッチされたアクションを監視する) と「ワーカー」サガ (副作用を処理する) に分けられます。
Take、put、call: Redux-Saga は、副作用をトリガーするタイミング、アクションをディスパッチするタイミング、API を呼び出すタイミングを制御するエフェクトクリエーター (take、put、call など) を提供します。

3. 仕組み:

Redux-Saga を使用すると、副作用の処理を担当するサガ (長時間実行されるバックグラウンドタスク) を定義します。
サガは通常、ジェネレーター関数として記述され、call (関数を呼び出す) や put (アクションをディスパッチする) などの効果を生成します。
Saga は、take で特定のアクションを待機したり、takeEvery または takelatest で任意のアクションをリッスンしたりすることもできます。

4. 例:

redux-saga の基本的な使用例を次に示します。

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

ログイン後にコピー

5. Redux-Saga の利点:

複雑な副作用に優れています: Saga のエフェクトベースのアプローチはよりスケーラブルで、複雑な非同期フローの管理 (再試行、デバウンス、またはカスケード API 呼び出しの処理など) に適しています。
テスト可能: サーガはジェネレーター関数を中心に構築されているため、テストが簡単です。
宣言的: エフェクトを使用すると、どのような副作用が発生するかが明確になり、フローがより予測可能になります。
キャンセルとシーケンス: Saga を使用すると、進行中のタスクをキャンセルしたり、イベントのシーケンスフロー (複数のアクションを待機するなど) を強制したりすることが簡単になります。

6. 欠点:

急峻な学習曲線: ジェネレーター関数の使用と全体的なパターンは、初心者にとって理解するのが難しい場合があります。
オーバーヘッド: 小規模なアプリケーションの場合、サンクのような単純なソリューションと比較すると過剰に感じるかもしれません。
冗長: サーガには、サンクと比較してより多くの定型コードが含まれる傾向があります。

比較: React Thunk と React Saga

アスペクト

Aspect	React Thunk	React Saga
Concept	Returns functions in action creators	Uses generator functions for side effects
Learning curve	Easier to learn and use	Higher learning curve due to generators
Asynchronous flow	Handles simple async logic	Better for complex async workflows
Code structure	Less structure, can get messy in large apps	Provides a clear, structured approach
Testing	Testing can be more challenging	Easier to test because of generators
Use cases	Simple async logic, API requests	Complex flows (e.g., sequences, retries)
Performance	Lightweight	More powerful, but slightly more overhead

反応サンクリアクトサーガコンセプトアクションクリエーターの関数を返します副作用のためにジェネレータ関数を使用します学習曲線学習も使用も簡単ジェネレータにより学習曲線が高くなる非同期フロー単純な非同期ロジックを処理します複雑な非同期ワークフローに適していますコード構造構造が少ないため、大規模なアプリでは乱雑になる可能性があります明確で構造化されたアプローチを提供しますテスト中テストはさらに困難になる場合がありますジェネレータのおかげでテストが簡単使用例単純な非同期ロジック、API リクエスト複雑なフロー (シーケンス、再試行など) パフォーマンス軽量より強力ですが、オーバーヘッドがわずかに増加しますテーブル>

いつどちらを使用するべきですか?

次の場合は React Thunk を使用します。
- アプリケーションには、基本的な API リクエストや条件に基づくディスパッチなど、比較的単純な非同期のニーズがあります。
- 定型文があまりなく、軽量でわかりやすいソリューションが必要です。
次の場合に React Saga を使用します:
- 再試行、アクションのシーケンス、競合状態、または相互に依存する複数のタスクなど、より複雑な非同期フローを管理する必要があります。
- あなたは宣言的なアプローチを好み、副作用をより良く制御したいと考えています。
- アプリには、長期的にはより優れたテスト容易性とコードの保守容易性が必要です。