redux-thunkを使用して以前の非同期アクションを取り消す

Question

私はredux-thunkミドルウェアを使用してAjaxリクエストを作成して処理するReact/Reduxアプリケーションを構築しています。私はかなり頻繁に発砲される特定のサンクを持っています。新しいAjaxリクエストを開始する前に、以前に開始したAjaxリクエストをキャンセルしたいと思います。これは可能ですか？

Answer 1

1つの方法は、それらの要求をランダムIDを与え、その結果を処理する前に状態をチェックすることによって、それらの要求をキャンセルとマークすることです。

これを行う方法は、最初のディスパッチ（サンク内）でこの呼び出しにランダムIDを割り当て、結果を処理する前に減速機でチェックすることです。

const actionId = Math.random(); 
dispatch({type: AJAX_LOAD_CONST, id:actionId }) 

あなたは結果があなたがU

とのidを送信することを忘れないでください処理したい場合には、要求を使用

dispatch({type:HANDLE_AJAX_RESPONSE, id:actionId, results: json })

のすべてをキャンセルしたいです減速機は次のようなものです：

function reducer(state = initialState, action) { 
    switch (action.type) { 
    case actions.AJAX_LOAD_CONST: 
     return Object.assign({}, state, { ajax: state.ajax.concat(action.id) }); 
    case actions.CANCEL_ALL_AJAX: 
     return Object.assign({}, state, { ajax: [] }); 
    case actions.HANDLE_AJAX_RESPONSE: 
     if (state.ajax.includes(action.id) { 
     //return state reduced with action.results here 
     } 
     return state; 
    } 
} 

XMLH ttpRequestまたはそのラッパー（JQuery？）の中にリクエストを保存してrequest.abort（）を呼び出すこともできます。新しいフェッチAPIを使用すると、この動作が不十分であるという約束通り、この贅沢はありません。

Answer 2

アクションクリエイターが約束を返すようにすることができます。ディスパッチ機能によって返され、アボートすることができます。次に例を示します。

アクションの作成者

function doSomething() { 
    return (dispatch) => { 
    return $.ajax(...).done(...).fail(...); 
    } 
} 

あなたのコンポーネント

componentDidMount(){ 
    this.previousPromise = this.props.dispatch(doSomething()); 
    } 

    somefnct() { 
    this.previousPromise.abort(); 
    }