Redux Axios Anfrage Abbruch

Question

Ich habe eine React Native-Anwendung mit Redux-Aktionen und Reducer. Ich verwende den Redux-Thunk-Versand, um die asyncron-Anrufe abzuwarten. Es ist eine Aktion in meiner Anwendung:

export const getObjects = (id, page) => { 
    return (dispatch) => { 
     axios.get(`URL`) 
      .then(response => { 
       dispatch({ type: OBJECTS, payload: response }); 
      }).catch(error => { 
       throw new Error(`Error: objects -> ${error}`); 
      }); 
    }; 
}; 

, die richtig funktioniert, aber manchmal der Benutzer klicken Sie auf den Zurück-Taste, bevor die Aktion beendet die Anfrage, und ich muss es gelöscht werden. Wie kann ich es in einer getrennten Aktion tun? Ich read this, aber ich habe keine Option in Axios für den Abbruch gefunden. Ich lese über die Axios cancellation, aber es ist eine Cancel-Methode für den Funktionsumfang erstellen und ich kann nicht zurückkehren, da die JS nicht mehrere Rückgaben unterstützen.

Was ist der beste Weg, um Axios Anfrage in einer anderen Redux Aktion abzubrechen?

Answer 1

Ich würde empfehlen, etwas wie RxJS + Redux Observables, die Sie mit kündbaren Observablen bietet.

Diese Lösung erfordert ein wenig zu lernen, aber ich glaube, es ist eine viel elegantere Art, asynchrone Action-Dispatching gegen redux-thunk zu behandeln, die nur eine Teillösung für das Problem ist.

Ich schlage vor, Jay Phelps Einführung zu sehen, die Ihnen helfen kann, die Lösung, die ich vorschlage, besser zu verstehen.

Ein redux-observable epic ermöglicht es Ihnen, Aktionen in Ihrem Geschäft zu versenden, während Sie RxJS Observable-Funktionen verwenden. Wie können Sie die .takeUntil() Operator lässt siehe unten Sie auf die ajax beobachtbaren huckepack und es in Ihrer Anwendung, wenn an anderer Stelle stoppen die Aktion MY_STOPPING_ACTION ausgelöst wird, die beispielsweise Aktion eine Routenänderung sein könnte, die von react-router-redux zum Beispiel ausgelöst wurde:

import { Observable } from 'rxjs'; 

const GET_OBJECTS = 'GET_OBJECTS'; 
const GET_OBJECTS_SUCCESS = 'GET_OBJECTS_SUCCESS'; 
const GET_OBJECTS_ERROR = 'GET_OBJECTS_ERROR'; 
const MY_STOPPING_ACTION = 'MY_STOPPING_ACTION'; 

function getObjects(id) { 
    return { 
    type: GET_OBJECTS, 
    id, 
    }; 
} 

function getObjectsSuccess(data) { 
    return { 
    type: GET_OBJECTS_SUCCESS, 
    data, 
    }; 
} 

function getObjectsError(error) { 
    return { 
    type: GET_OBJECTS_ERROR, 
    data, 
    }; 
} 

const getObjectsEpic = (action$, store) = action$ 
    .ofType(GET_OBJECTS) 
    .switchMap(action => Observable.ajax({ 
     url: `http://example.com?id=${action.id}`, 
    }) 
    .map(response => getObjectsSuccess(response)) 
    .catch(error => getObjectsError(error))   
    .takeUntil(MY_STOPPING_ACTION) 
);