map redux saga 结果

Question

代码

我跟着了解了如何使用 map 和 yield。

我的代码分为 3 部分：

示例数据

citiesCode = [
 {
  bankCityId: A305
  cityId: B544
 },
 {
  bankCityId: R394
  cityId: D873
 },
]

1) 当我启动相关操作时调用的函数

export function* getInvoiceCities({ citiesCode }) {
  yield call(invoiceCities, citiesCode);
}

2) 这个函数允许我映射 citiesCode 是

的数组

export function* invoiceCities(citiesCode) {
  yield all(citiesCode.map(cityCode => call(getCityInfo, cityCode)));
}

3) 在最后一个函数中，我使用相关代码调用了 bankCityUrl 和 cityUrl 以获取有关相关城市的信息。

const citiesInfoList = [];

function* getCityInfo({ bankCity, city }) {
  const cityUrl = `/cities/${city}`;
  const bankCityUrl = `/cities/${bankCity}`;
  try {
    const cityInfoResponse = yield call(fetchWrapper, {
      url: cityUrl,
    });

    const bankCityInfoResponse = yield call(fetchWrapper, {
      url: bankCityUrl,
    });

    citiesInfoList.push(cityInfoResponse, bankCityInfoResponse);
    console.log('cities.info', citiesInfoList);

    // if (cityInfoResponse.status && bankCityInfoResponse.status === 'success') {
    //   yield put(saveInvoiceCitiesResponse(citiesInfoList));
    // }
  } catch ({ packet, response }) {
    if (response.status !== 422) {
      yield put(pushError({ text: 'sendPraticeSectionError' }));
    }
  }

BUG

主要错误是：如果我多次调用 getInvoiceCities 保存以进行此 redux 调用，我会越来越多地存储相同的城市。

举个例子：

citiesInfoList = []

我第一次调用：我console.log('cities.info', citiesInfoList);citiesInfoList会填充正确的结果

我第二次调用了：我console.log('cities.info', citiesInfoList); citiesInfoList 会填入正确的结果 x 2

我第二次调用了：我console.log('cities.info', citiesInfoList);citiesInfoList会填入正确的结果x 3

有办法避免这种行为吗？我可以停止多次存储相同的结果吗？

Answer 1

之所以会发生这种情况，是因为您所有的 sagas 都在一个文件中

如果我理解正确的话，当你调用一个调用 getInvoiceCities 的动作时，它将调用 invoiceCities，而后者将为每个 cityCode 调用 getCityInfo .

但是，因为您已经在同一个模块中定义了 const citiesInfoList = [];。接下来发生的是 getCityInfo 将开始对每个 getCityInfo 调用使用 citiesInfoList，从而导致如您所描述的重复结果。

我建议如下：

推荐：从这个文件中取出citiesInfoList到一个单独的文件中，build a reducer来管理它。
每次推送前重置 citiesInfoList = []。

Answer 2

我在几个小时前找到了一个简单的答案。

1）我删除了citiesInfoList = []（恕我直言，很难看） 2) 在第二个函数中我做了这个

export function* invoiceCities(citiesCode) {
  const results = yield all(
    citiesCode.map(cityCode => call(getCityInfo, cityCode)),
  );
  yield put(saveInvoiceCitiesResponse(results));
}

map redux saga 结果

map redux saga results

arrays

redux

redux-saga