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

反応サンク

1. 概要:

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

2. 主要な概念:

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

3. 仕組み:

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

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. サンクの利點(diǎn):

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

6. 欠點(diǎn):

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

リアクトサーガ

1. 概要:

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

2. 主要な概念:

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

3. 仕組み:

• Redux-Saga を使用すると、副作用の処理を擔(dān)當(dāng)するサガ (長(zhǎng)時(shí)間実行されるバックグラウンド タスク) を定義します。
• サガは通常、ジェネレーター関數(shù)として記述され、call (関數(shù)を呼び出す) や put (アクションをディスパッチする) などの効果を生成します。
• Saga は、take で特定のアクションを待機(jī)したり、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 の利點(diǎn):

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

6. 欠點(diǎn):

• 急峻な學(xué)習(xí)曲線(xiàn): ジェネレーター関數(shù)の使用と全體的なパターンは、初心者にとって理解するのが難しい場(chǎng)合があります。
• オーバーヘッド: 小規(guī)模なアプリケーションの場(chǎng)合、サンクのような単純なソリューションと比較すると過(guò)剰に感じるかもしれません。
• 冗長(zhǎng): サーガには、サンクと比較してより多くの定型コードが含まれる傾向があります。

比較: React Thunk と React Saga

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

• 次の場(chǎng)合は React Thunk を使用します。

  • アプリケーションには、基本的な API リクエストや條件に基づくディスパッチなど、比較的単純な非同期のニーズがあります。
  • 定型文があまりなく、軽量でわかりやすいソリューションが必要です。

• 次の場(chǎng)合に React Saga を使用します:

  • 再試行、アクションのシーケンス、競(jìng)合狀態(tài)、または相互に依存する複數(shù)のタスクなど、より複雑な非同期フローを管理する必要があります。
  • あなたは宣言的なアプローチを好み、副作用をより良く制御したいと考えています。
  • アプリには、長(zhǎng)期的にはより優(yōu)れたテスト容易性とコードの保守容易性が必要です。

以上がRedux ツールキット: React Thunk および React Saga。Vishal Tiwari から學(xué)びます。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。