redux和redux-saga UI操作触发多个API操作

Question

Just trying to understand what the best practice is for a bunch of API calls to depend on a single UI action in redux and redux-saga . For instance

1. UI action SELECTED_ITEM_CHANGE gets triggered
2. Several API request actions get triggered: DATA1_REQUEST , DATA2_REQUEST , ..., DATA10_REQUEST
3. When DATA1_REQUEST , ... , DATA10_REQUEST get resolved, redux-saga sends a bunch of actions like DATA1_SUCCESS with data to resolve to the store. I got this part using redux-saga and I basically understand how to do it.

My question is, how do I get DATA1_REQUEST , ... , DATA10_REQUEST to get triggered when SELECTED_ITEM_CHANGE gets triggered? The dumb way is to just do it in the component that sends SELECTED_ITEM_CHANGE and just dispatch all of those actions along with the SELECTED_ITEM_CHANGE action, but this is not modular since the component should not be responsible for all those API calls. So who should handle this? I guess there's a couple options:

1. Make the action creator that dispatches SELECTED_ITEM_CHANGE also dispatch DATA1_REQUEST , ..., DATA10_REQUEST .
2. Make a saga that listens to SELECTED_ITEM_CHANGE and dispatch DATA1_REQUEST , ..., DATA10_REQUEST

I'm leaning towards the second, but I'm not very sure.

Thanks for your help!

Answer 1

Option 2 is your option, that's the whole point behind redux-saga AFAIK. You can simply use takeEvery (would allow multiple requests) or takeLatest to listen for SELECTED_ITEM_CHANGE action and yield to another saga that actually performs the network requests.

You can see an example right in the documentation here: https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html

Excerpt:

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)
}