reactjs - Redux saga 从 saga-action 中的 map 内部调度 Action

Question

我有以下方式的 API 调用:

调用 main api，它给了我一个对象数组。

对于数组中的每个对象，我必须异步调用另一个 API。

一旦对象的子 API 调用完成，更新它在 redux 存储中的数据，它是一个数组 (ofc) 并显示它。

所以场景是一个列表，显示以动态方式增长的项目。
由于我使用的是 redux-saga，因此我必须从 redux-action 内部发送第二部分。我尝试了以下方法:

const response = yield call(get, 'endpoint')

const configHome = response.map(function* (ele) {
    const data = yield call(get, ele.SomeURI + '?someParameter=' + ele.someObject.id)
}))

这不起作用，因为 map 对生成器函数一无所知。所以我试过这个:

const response = yield call(get, 'endpoint')

const configHome = yield all(response.map((ele) => {

     return call(get, paramsBuilder(undefined, ele.CategoryID))

}))

但这会阻止我的 UI 显示可用数据，直到所有子 API 调用完成。
我还尝试制作一个单独的生成器函数，我从 map 内部调用它并调用它的 .next() 函数，但这里的问题再次是 saga 不控制该生成器函数，因此调用效果不会正确返回任何值。
完全卡在这部分。将不胜感激任何帮助。

Answer 1

你有没有试过这个，我已经创建了一个样本，这可能 help

import { put, takeLatest, all, call } from 'redux-saga/effects';
function* _fetchNews(id) {
  const data = yield fetch(
    `https://jsonplaceholder.typicode.com/todos/${id}`
  ).then(function(response) {
    const data = response.json();
    return data;
  });
  console.log(id);
  yield put({ type: 'NEWS_RECEIVED', data });
  return data;
}

function* _getData() {
  const json = yield fetch('https://jsonplaceholder.typicode.com/todos').then(
    response => response.json()
  );
  return json;
}

function* fetchNews() {
  const json = yield _getData();
  const configHome = json.map(ele => _fetchNews(ele.id));
  for (var item of configHome) {
    yield item;
  }
}

function* actionWatcher() {
  yield takeLatest('GET_NEWS', fetchNews);
}

export default function* rootSaga() {
  yield all([actionWatcher()]);
}