Asynchrone API Anrufe mit Redux-Saga

Question

Ich bin auf redux-saga documentation auf Helfern, und bis jetzt scheint es ziemlich einfach, aber ich stolperte über ein Problem, wenn es darum geht, eine API-Aufruf (wie Sie Link zu den Docs Punkte sehen auf ein solches Beispiel)

Es gibt einen Teil Api.fetchUser, die nicht erklärt wird, damit nicht beruhigen ich verstehe, wenn das etwas ist, dass wir mit Bibliotheken wie axios oder superagent behandeln müssen? oder ist das etwas anderes? Und sind Saga-Effekte wie call, put etc .. Entsprechungen von get, post? Wenn ja, warum werden sie so genannt? Im Grunde versuche ich, eine richtige Art und Weise, um herauszufinden, example.com/sessions eine einfache Post Aufruf an meine api in URL zu führen und es Daten wie { email: 'email', password: 'password' }

Answer 1

Api.fetchUser Pass ist eine Funktion, wo soll api Ajax-Aufruf durchgeführt werden, und es sollte Versprechen zurück.

In Ihrem Fall sollte dieses Versprechen die Benutzerdatenvariable auflösen.

Zum Beispiel:

// services/api.js 
export function fetchUser(userId) { 
    // `axios` function returns promise, you can use any ajax lib, which can 
    // return promise, or wrap in promise ajax call 
    return axios.get('/api/user/' + userId); 
}; 

Dann Saga ist:

function* fetchUserSaga(action) { 
    // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function. 
    // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable 
    const userData = yield call(api.fetchUser, action.userId); 
    // Instructing middleware to dispatch corresponding action. 
    yield put({ 
    type: 'FETCH_USER_SUCCESS', 
    userData 
    }); 
} 

call, put sind Funktionen Schöpfer Effekte. Sie haben nichts mit GET oder POST Anfragen vertraut.

call Funktion wird verwendet, um Effektbeschreibung zu erstellen, die Middleware anweist, das Versprechen zu nennen. put Funktion erstellt einen Effekt, der Middleware anweist, eine Aktion an den Speicher zu senden.

Answer 2

Dinge wie call, put, take, race sind Effekte Schöpfer Funktionen. Der Api.fetchUser ist ein Platzhalter für Ihre eigene Funktion, die API-Anforderungen verarbeitet.

Hier ist ein vollständiges Beispiel eines loginSaga:

export function* loginUserSaga() { 
    while (true) { 
    const watcher = yield race({ 
     loginUser: take(USER_LOGIN), 
     stop: take(LOCATION_CHANGE), 
    }); 

    if (watcher.stop) break; 

    const {loginUser} = watcher || {}; 
    const {username, password} = loginUser || {}; 
    const data = {username, password}; 

    const login = yield call(SessionService.login, data); 

    if (login.err === undefined || login.err === null && login.response) { 
     yield put(loginSuccess(login.response)); 
    } else { 
     yield put(loginError({message: 'Invalid credentials. Please try again.'})); 
    } 
    } 
} 

In diesem Code-Schnipsel, die SessionService eine Klasse, die eine login Methode implementiert, die die HTTP-Anforderung an die API behandelt. Die redux-saga call ruft diese Methode auf und wendet den Datenparameter darauf an. Im obigen Ausschnitt können wir dann das Ergebnis des Anrufs auswerten und die Aktionen loginSuccess oder loginError entsprechend mit put absetzen.

Eine Randnotiz: Das obige Snippet ist ein loginSaga, das ständig auf das USER_LOGIN Ereignis wartet, aber bricht, wenn ein LOCATION_CHANGE passiert. Dies ist dank der race Effekt Creator.