地图中的 Redux-Saga call() 和 put()

Question

我正在尝试使用 all() 和 map() 函数发出多个请求，如果结果出现并具有预期的形状，我想调用另一个操作以将结果保存在我的商店中。

这是我传奇的一部分，但它没有按预期工作 - getAvailabilityRequest 没有执行。

   yield all(
    part1.map((p1) => {
      return part2.map((p2) => {
        return tld.map((t) => {
          const response =  call(getAvailabilityRequest, `${p1}${p2}.${t}`);
          if (response && isAvailabilityResult(response)) {
              const index: AvailabilityIndex = { part1: p1, part2: p2, tld: t };
              return put(setAvailabilityActionCreator({ index, item: response }));
            }
        });
      });
    })
  );

我也试过这个

  const response = yield all(
    part1.map((p1) => {
      return part2.map((p2) => {
        return tld.map((t) => {
          return {index: { part1: p1, part2: p2, tld: t }, result: call(getAvailabilityRequest, `${p1}${p2}.${t}`)};
        });
      });
    })
  );

保留有关 index 的数据，但 getAvailabilityRequest 仍未被调用。有什么方法可以更改 saga 以获得预期结果？

Answer 1

您没有return调用，因此无法产生。更重要的是 - yield all 期望 return Promises 的函数数组。调度一个动作不会 return 一个 Promise 而这就是你在这里所做的。 put 是 非阻塞 调用。

我建议您将逻辑委托给一个单独的生成器函数。

function* getAvailability(p1, p2, t) {
   try {
      const response = call(getAvailabilityRequest, `${p1}${p2}.${t}`);
      if (response && isAvailabilityResult(response)) {
          const index: AvailabilityIndex = { part1: p1, part2: p2, tld: t };
          yield put(setAvailabilityActionCreator({ index, item: response }));
      }
   } catch (error) {
     // error logic
   }
}

编辑：嵌套的 map 似乎是个问题。 yield all 需要平面数组。

const calls = yield [];

yield part1.forEach((p1) => {
   part2.forEach((p2) => {
      tld.forEach((t) => {
         calls.push(call(getAvailabilityRequest, `${p1}${p2}.${t}`));
      });
   });
});


const response = yield all(calls);

地图中的 Redux-Saga call() 和 put()

Redux-Saga call() and put() in map

reactjs

redux-saga