新しいアクションで以前のアクションの実行をキャンセルする方法は？

Question

私は、高価な計算を行い、ユーザが何かを入力するたびにアクションをディスパッチするアクションクリエータを持っています（基本的にリアルタイム更新）。しかし、ユーザーが複数のものを入力した場合、以前の高価な計算が完全に実行されることは望ましくありません。理想的には、以前の計算の実行を取り消し、現在の計算をやり直したいと思っています。

Answer 1

Promiseを非同期処理で取り消す機能はありません。 AJAXリクエストを使用している場合はキャンセルを手動で実装することはできますが、Fetch APIを使用している場合はキャンセルできません（この機能の追加に関する継続的な議論がありますhere）。

しかし、ユーザーがフィールドで何かを入力するたびに高価なアクションをディスパッチする代わりに、イベント処理関数にデバウンス関数を適用してください。この機能は、多くの図書館で利用可能です：

• lodash#debounce
• underscore#debounce

これは、ミリ秒の一定数が、このアクションが派遣された最後の時間から経過したまで行動を派遣遅らせます。アクションがディスパッチされるので、非同期操作の数が大幅に減ります。つまり、すべての変更イベントではなく、500msまたは1秒ごとに構成に依存します。

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の-佐賀を利用することであろう。あなたが達成しようとしていることをやっているような、非常に有用なヘルパーtakeLatestがあります。