reduxとredux-sagaのUIアクションが複数のAPIアクションをトリガーする

Question

reduxとredux-sagaという単一のUIアクションに依存する一連のAPI呼び出しのベストプラクティスを理解しようとしています。例えば

1. UIアクションSELECTED_ITEM_CHANGEが
2. いくつかのAPIリクエストのアクションがトリガされますトリガされます：DATA1_REQUEST、DATA2_REQUEST、...、
3. DATA1_REQUESTは、...、DATA10_REQUESTが解決を取得、Reduxの-サガが送信DATA10_REQUESTストアに解決するデータがあるDATA1_SUCCESSのような一連のアクション。私はredux-sagaを使ってこの部分を得ました、そして、私は基本的にそれを行う方法を理解しています。

SELECTED_ITEM_CHANGEがトリガされます時に私の質問は、私は入手できますかDATA1_REQUEST、...、DATA10_REQUESTがトリガー取得することですか？愚かなやり方は、SELECTED_ITEM_CHANGEとdispatchというアクションをすべてSELECTED_ITEM_CHANGEアクションとともに送信するコンポーネントで行うだけですが、これらのAPI呼び出しのすべてをコンポーネントが処理するべきではないため、これはモジュール化されていません。誰がこれを処理すべきですか？私は、カップルのオプションがあります推測：

1. SELECTED_ITEM_CHANGEもDATA1_REQUEST、...、DATA10_REQUESTを派遣する派遣アクションの作成者を確認します。
2. はSELECTED_ITEM_CHANGEに耳を傾けサガを作成し、派遣DATA1_REQUEST、...、DATA10_REQUEST

私は2番目に傾いていますが、私は非常にわかりません。

ありがとうございました！

Answer 1

オプション2はあなたのオプションです。それはredux-saga AFAIKの背後にあります。 takeEvery（複数のリクエストを許可する）またはtakeLatestを使用して、SELECTED_ITEM_CHANGEアクションをリッスンし、実際にネットワークリクエストを実行する別のサガに簡単にリダイレクトすることができます。

あなたは右ここにドキュメントの例を見ることができます： https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html

抜粋：

import { takeLatest } from 'redux-saga/effects' 

function* fetchData(){ 
    try { 
     const data = yield call(Api.fetchUser, action.payload.url) 
     yield put({type: "FETCH_SUCCEEDED", data}) 
    } catch (error) { 
     yield put({type: "FETCH_FAILED", error}) 
    } 
} 

function* watchFetchData() { 
    yield takeLatest('FETCH_REQUESTED', fetchData) 
} 

を