在 redux 操作中控制异步批处理请求

Question

我有一个用于在应用程序中搜索的 redux 操作。当用户开始搜索时，它会批处理查询并为每个请求发送 30 个查询并将前 10 个请求排队。每当任何一个请求成功时，它都会将下一个请求添加到请求队列中。所有这一切都是作为一个 redux 操作发生的，只要请求成功，它就会调度操作以将结果附加到存储中。如果用户单击“取消搜索”并输入新的搜索词，我想输入有关如何处理此问题的信息。如何取消现有的请求和 redux 操作，以使之前的搜索请求不会成功并添加到结果存储中？

下面的示例代码：-

function search(queries){
  // split the queries into chunks of size 30
  batches = _.chunks(queries, 30);

  let count = 0;

  //get the first batch manually
  getBatch(batches[0]);

  function getBatch(batch){
    axios.post('url', batch.join(',')).then((response) => {

      // recursively call get batch to get rest of the data
      if(count < batches.length) { getBatch(batches[count++]); }

      // dispatch action to append the result into the store
      dispatch({ type: 'APPEND_RESULT', payload: response })
    }
  }
}

这是共享概念的最小代码

我已经阅读过 axios 支持它的可取消承诺。但我不确定如何在第二次执行同一函数时控制此递归调用。

例如：用户输入将是 { ids :[1,2,3,..1000] } 我正在尝试创建批次并发送并行请求 { ids:[1,2, .. 29,30 }, { ID：[31, 32, .. 59,60]} 等。

Answer 1

这看起来像是redux observable 的候选者。您可以创建一个 observable，然后添加一个 debounce（如上面的一条评论中提到的），并且您可以在当前请求完成时轻松取消或 switchMap 到新请求，这样前一个队列中的任何剩余项目都不会被考虑。

Answer 2

答案是总恕我直言

在我看来，解决问题的整个方法在这里都被打破了。您将通过不断询问服务器的任何输入更改来放弃您的服务器。试想一下，您的网站会为移动设备消耗多少流量！

这里最好的解决方法是：

1. 将_.debounce 添加到您的输入中，等待时间较短（100 毫秒即可）
2. 内存中只有一个查询。在来自user 的每个新事件上输入cancel 请求并覆盖当前请求。
3. 使用每个服务器响应的数据发送操作