Question

我有一个动作创建器，它执行昂贵的计算，并在每次用户输入内容时发送动作（基本上是实时更新）。但是，如果用户输入了多个内容，我不希望以前昂贵的计算完全运行。理想情况下，我希望能够取消先前计算的执行，只需执行当前计算。

Answer 1

在异步操作中没有取消Promise的内置功能。如果您使用的是AJAX请求，可以尝试手动实现取消，但是，如果您使用的是Fetch API，则无法进行取消（有关添加此功能here的讨论正在进行中）。

然而，我建议您做什么，而不是每当用户键入字段中的某些内容时调度昂贵的操作，请将debouncing函数应用于事件处理函数。许多库都提供此功能：

这会延迟调度操作，直到自上次调度此操作后经过一定的毫秒数。它会大大减少一些繁重的异步操作，因为动作将被调度，比方说，每500ms或1s取决于你的配置而不是每次更改事件。

lodash的实施示例：

class MyComponent extends React.Component {

  constructor() {
    // Create a debounced function
    this.onChangeDelayed = _.debounce(this.onChange, 500);
  }

  onChange() {
    this.props.onChange(); // Function that dispatches an action
  }

  render() {
    return (<input type="text" onChange={this.onChangeDelayed} />);    
  }
}

Answer 2

另一个可能的解决方案是使用redux-saga。有一个名为takeLatest的非常有用的助手似乎正在做你想要完成的事情。

如何取消对新操作执行上一个操作？

2 个答案: