javascript tutorial Asynchrone API-Aufrufe mit Redux-Saga




redux saga typescript (2)

Ich folge Redux-Saga-Dokumentation über Helfer, und bisher scheint es ziemlich geradlinig zu sein, aber ich stolperte über ein Problem, wenn es darum ging, einen API-Aufruf auszuführen (wie Sie sehen, verweist Link zu den Dokumenten auf ein solches Beispiel)

Es gibt einen Teil Api.fetchUser , der nicht erklärt wird, also verstehe ich nicht ruhig, ob das etwas ist, das wir mit Bibliotheken wie Axios oder Superagenten umgehen müssen ? oder ist das etwas anderes? Und sind Saga-Effekte wie call, put usw. Äquivalente von get, post ? Wenn ja, warum werden sie so genannt? Im Wesentlichen versuche ich herauszufinden, wie man einen einfachen Post-Call an meine API unter url example.com/sessions und Daten wie { email: 'email', password: 'password' }


Api.fetchUser ist eine Funktion, die nach einem Api.fetchUser Aufruf ausgeführt werden soll und die Versprechen Api.fetchUser soll.

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

Beispielsweise:

// 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 ist sagas:

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 Effekte Schöpfer Funktionen. Sie haben etwas, das mit GET oder POST Anfragen nicht vertraut ist.

call wird verwendet, um eine Effektbeschreibung zu erstellen, die Middleware anweist, das Versprechen aufzurufen. put function creates effect, in dem Middleware angewiesen wird, eine Aktion an den Store zu senden.


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

Hier ist ein vollständiges Beispiel für eine 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 SessionService ist der SessionService eine Klasse, die eine login Methode implementiert, die die HTTP-Anfrage an die API behandelt. Der Redux-Saga- call ruft diese Methode auf und wendet den Datenparameter darauf an. Im obigen Ausschnitt können wir dann das Ergebnis des Aufrufs auswerten und loginSuccess oder loginError Aktionen mit put entsprechend loginError .

Eine Randnotiz: Das obige Snippet ist ein loginSaga, das ständig auf das Ereignis USER_LOGIN , aber bricht, wenn LOCATION_CHANGE passiert. Dies ist dank des race Effekt-Creators möglich.





redux-saga