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

【问题标题】：redux and redux-saga UI action triggering multiple API actions触发多个 API 操作的 redux 和 redux-saga UI 操作
【发布时间】：2017-06-26 14:16:59
【问题描述】：

只是想了解一堆 API 调用依赖于 redux 和 redux-saga 中的单个 UI 操作的最佳做法是什么。比如

UI 操作 SELECTED_ITEM_CHANGE 被触发
触发了多个 API 请求操作：DATA1_REQUEST、DATA2_REQUEST、...、DATA10_REQUEST
当 DATA1_REQUEST, ... , DATA10_REQUEST 得到解决时，redux-saga 会发送一堆动作，例如 DATA1_SUCCESS，并带有要解析的数据到 store。我使用redux-saga 获得了这部分内容，我基本上知道该怎么做。

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

使调度SELECTED_ITEM_CHANGE 的动作创建者也调度DATA1_REQUEST, ..., DATA10_REQUEST。
制作一个聆听SELECTED_ITEM_CHANGE 并调度DATA1_REQUEST, ..., DATA10_REQUEST 的saga

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

感谢您的帮助！

【问题讨论】：

标签： reactjs redux redux-saga

【解决方案1】：

选项 2 是您的选择，这就是 redux-saga AFAIK 背后的重点。您可以简单地使用takeEvery（将允许多个请求）或takeLatest 来侦听SELECTED_ITEM_CHANGE 操作并让步给另一个实际执行网络请求的saga。

您可以在此处的文档中看到一个示例： 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)
}

【讨论】：