我有一个动作创建者，它进行昂贵的计算并在用户每次输入内容时分派一个动作（基本上是实时更新）。但是，如果用户输入多个内容，我不希望之前的昂贵计算完全运行。理想情况下，我希望能够取消先前计算的执行并只执行当前计算。
如何在新动作上取消先前动作的执行？
IT技术
javascript
reactjs
redux
redux-thunk
2021-05-28 00:19:14
2个回答
没有内置功能可以取消异步操作中的Promise。如果您使用 AJAX 请求，您可以尝试手动实现取消，但是，如果您使用Fetch API，这是不可能的（关于在此处添加此功能的讨论正在进行中）。
但是，我建议您不要在每次用户在字段中输入内容时分派昂贵的操作，而是将去抖动功能应用于您的事件处理功能。该函数在许多库中可用：
这将延迟分派动作，直到自上次分派此动作以来已经过去了一定的毫秒数。它将大大减少大量繁重的异步操作，因为操作将被调度，比方说，每 500 毫秒或 1 秒取决于您的配置而不是每个更改事件。
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} />);
}
}
另一个潜在的解决方案是使用 redux-saga。有一个非常有用的助手takeLatest，它似乎可以完成您想要完成的任务。