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}，{ ids：[31,32，.. 59,60]}等等。

Answer 1

这看起来像redux observable的候选人。您可以创建一个observable，然后添加一个debounce（如上面的一个注释中所述），只要当前请求完成，您就可以轻松取消或切换到新请求，以便不考虑前一个队列中的任何剩余项目。

Answer 2

答案是总恕我直言

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

这里最好的解决方法是：

以较短的等待时间（100毫秒为好）将_.debounce添加到您的输入中
内存中只有一个查询。在user输入cancel的每个新事件中，请求并覆盖当前的事件。
发送包含每个服务器响应数据的操作

在redux操作

2 个答案: