Anulowanie poprzedniej akcji async przy użyciu redux-thunk

Question

Buduję aplikację React/Redux przy użyciu oprogramowania pośredniczącego redux-thunk do tworzenia i obsługi żądań Ajax. Mam konkretny thunk, który jest dość często wystrzeliwany i chciałbym anulować wszystkie wcześniej rozpoczęte żądania Ajax przed wystrzeleniem nowego. czy to możliwe?

Answer 1

Jednym z podejść byłoby oznaczenie tych wniosków jako anulowane poprzez nadanie im losowego identyfikatora i sprawdzenie jego statusu przed przystąpieniem do wyniku.

Aby to zrobić, należy przypisać losowy identyfikator dla tego połączenia w pierwszej wysyłce (wewnątrz thunk) i sprawdzić to w reduktorze przed obsługą wyniku.

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

Gdy chcesz anulować wszystkie żądania użyć

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

Gdy chcesz obsługiwać wyniki nie zapomnij wysłać identyfikator że u

aw reduktor ma coś takiego:

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

Jeśli używasz XMLH ttpRequest lub jeden z jego wrapperów (JQuery?) możesz także przechowywać żądania samodzielnie i wywołać request.abort(). jeśli używasz nowego api aportu, nie masz tego luksusu, ponieważ obietnice nie mają takiego zachowania.

Answer 2

Możesz spowodować, że twórca akcji zwróci obietnicę, zostanie zwrócony przez funkcję wysyłki, wtedy będzie można ją przerwać. Oto przykład:

Action twórca

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

komponentu

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

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