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

Question

我遇到了一个问题，即根据先前的状态，每次调用都会使用多个 thunk 调用。让我试着澄清这个问题。

规格

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

当前实施

现在，当前的实现是使用带有 API 调用的 thunk 完成的，一旦我们得到响应，我们就会过滤列表。如果该项目在列表中，我们将调度一个名为 'ITEM_FOUND' 的动作，否则我们将调度另一个名为 'NEXT_ACCOUNT' 的动作。此操作会增加存储在 Redux 存储中的索引。然后，在 componentDidUpdate 中，我们检查索引是否已达到 accountID 长度，如果是，我们将重定向到“/”。否则，我们再次调用 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 调用

How to handle conditional thunk calls depending on state

reactjs

redux

redux-thunk