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

Question

尝试了解一系列API调用的最佳做法，这些调用依赖于redux和redux-saga中的单个UI操作。例如

1. UI动作SELECTED_ITEM_CHANGE被触发
2. 触发了多个API请求操作：DATA1_REQUEST，DATA2_REQUEST，...，DATA10_REQUEST
3. 当DATA1_REQUEST，...，DATA10_REQUEST得到解决时，redux-saga会向DATA1_SUCCESS发送一系列操作，并将数据解析到商店。我使用redux-saga得到了这个部分，我基本上了解了如何做到这一点。

我的问题是，当DATA1_REQUEST被触发时，如何让DATA10_REQUEST，...，SELECTED_ITEM_CHANGE触发？愚蠢的方法是在发送SELECTED_ITEM_CHANGE并且dispatch所有这些操作以及SELECTED_ITEM_CHANGE操作的组件中执行此操作，但这不是模块化的，因为组件不应该是负责所有这些API调用。那么谁应该处理这个？我想有几个选择：

1. 让发送SELECTED_ITEM_CHANGE的动作创建者也发送DATA1_REQUEST，...，DATA10_REQUEST。
2. 制作一个倾听SELECTED_ITEM_CHANGE并发送DATA1_REQUEST，...，DATA10_REQUEST
的传奇

我倾向于第二个，但我不太确定。

感谢您的帮助！

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