Question

我面临着每次通话使用多个thunk调用的问题，具体取决于之前的状态。让我试着澄清一下这个问题。

的 SPECIFICATION

我有一个thunk，它调用API返回给定accountID的项目列表。需要迭代此列表以查找给定项是否存在。如果我们要搜索的元素不属于该列表，我们需要使用下一个accountID进行另一个API调用。重复此过程，直到找到项目或已使用所有帐户ID为止。

当前实施

现在，当前的实现是使用带有API调用的thunk完成的，一旦我们得到响应，我们就会过滤列表。如果该项目在列表中，我们会发送一个名为＆＃39; ITEM_FOUND＆＃39; 的操作，否则我们会发送另一个名为＆＃39; NEXT_ACCOUNT＆＃39; 的操作。此操作会增加存储在Redux存储中的索引。然后，在componentDidUpdate中，我们检查索引是否已达到accountID长度，如果是，我们将重定向到＆＃39; /＆＃39;。否则，我们再次打电话给thunk。

我不喜欢这个解决方案：

触发了大量重新渲染
存储在Redux商店中的索引

我想将实施改进到我能找到的最佳解决方案。

有什么想法吗？

Answer 1

你应该能够将所有内容放在你的thunk中并避免任何不必要的渲染，也许是这样的（我假设是ES6语法）：

export const findItem = (ids, item) => {
  return async (dispatch, getState) => {
    try {
      for (const id of ids) {
        const items = await getItemsFromAPI(id)
        if (items.find(i => i === item)) {
          return dispatch('ITEM_FOUND')
        }
      }
    } catch (e) {
      // log error
    }
  }
}

您将注意到使用ES6 await关键字将多个异步API调用转换为有效的同步序列。

如何根据状态处理条件thunk调用

1 个答案: