映射 redux 传奇结果答案

【问题标题】：map redux saga results映射 redux 传奇结果
【发布时间】：2020-04-10 05:53:06
【问题描述】：

代码

我关注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 save 来进行这个 redux 调用，我会越来越多地存储相同的城市。

举个例子：

城市信息列表 = []

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

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

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

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

【问题讨论】：

标签： arrays redux redux-saga

【解决方案1】：

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

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

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

我建议如下：

推荐：将此文件中的citiesInfoList 取出到一个单独的文件中，然后build a reducer 对其进行管理。
每次推送前重置citiesInfoList = []。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：