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之类的DATA1_SUCCESS与要解析的数据一起发送到存储中。 我使用redux-saga获得了这一部分，我基本上了解了如何做。

我的问题是，当SELECTED_ITEM_CHANGE被触发时，如何获取DATA1_REQUEST ，...， DATA10_REQUEST来触发？ 愚蠢的方法是只在发送SELECTED_ITEM_CHANGE的组件中执行此操作，然后dispatch所有这些动作与SELECTED_ITEM_CHANGE动作一起dispatch ，但这不是模块化的，因为该组件不应对所有这些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)
}