map redux saga results

Question

代码

我跟随this stackoverflow post了解如何将地图与产量结合使用。

我的代码分为三部分：

示例数据

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

1）我启动相对动作时调用的函数

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

2）此函数允许我映射citysCode是的数组

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将充满正确的结果

我第二次调用它：Iconsole.log('cities.info', citiesInfoList);citiesInfoList将填充正确的结果x 2

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

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

Answer 1

发生这种情况是因为您的所有sagas都位于一个文件中

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

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

我建议以下内容：

1. 推荐：将citiesInfoList从该文件中获取到单独的文件中，并通过build a reducer对其进行管理。
2. 每次按下前重置citiesInfoList = []。

Answer 2

几个小时前，我发现了一个简单的答案。

1）我删除了citiesInfoList = []（看到恕我直言非常难看）2）在第二个功能中我做到了

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