映射 redux 传奇结果

Posted 2023-02-19

【中文标题】映射 redux 传奇结果

【英文标题】：map redux saga results

【发布时间】：2020-04-10 05:53:06

【问题描述】：

代码

我关注this *** 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

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

【参考方案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));