Abbrechen der vorherigen asynchronen Aktion mit redux-thunk

Question

Ich baue eine React/Redux-App mit der Redux-Thunk-Middleware, um Ajax-Anfragen zu erstellen und zu bearbeiten. Ich habe einen bestimmten Thunk, der ziemlich oft gefeuert wird, und ich möchte alle zuvor gestarteten Ajax-Anfragen abbrechen, bevor ich einen neuen starte. Ist das möglich?

Answer 1

Ein Ansatz wäre, diese Anfragen als abgebrochen zu markieren, indem man ihnen eine zufällige ID gibt und ihren Status überprüft, bevor das Ergebnis behandelt wird.

Der Weg dies zu tun ist, zufällige ID für diesen Anruf in Ihrem ersten Versand (innerhalb der Thunk) zuzuordnen und überprüfen Sie es in der Reducer vor der Behandlung des Ergebnisses.

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

Wenn Sie alle die Anforderung abbrechen möchten verwenden

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

Wenn Sie die Ergebnisse behandeln möchten, vergessen Sie nicht die ID senden, die Sie u

und in die Reduzierung haben etwas in der Art:

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; 
    } 
} 

Wenn Sie XMLH verwenden ttpRequest oder eines seiner Wrapper (JQuery?) Sie können die Anfragen auch selbst speichern und request.abort() aufrufen. Wenn Sie die neue Fetch Api verwenden, haben Sie diesen Luxus nicht, da Versprechen dieses Verhalten nicht haben.

Answer 2

Sie können Ihren Aktionsersteller dazu bringen, das Versprechen zurückzugeben, es wird von der Versandfunktion zurückgegeben, dann kann es abgebrochen werden. Hier ein Beispiel:

Aktion Schöpfer

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

Ihre Komponente

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

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