Appels api asynchrones avec redux-saga

Je suis redux-saga de la documentation sur les helpers, et jusqu'à présent, il semble assez simple, cependant je suis tombé sur un problème quand il s'agit d'effectuer un appel d'api (comme vous le verrez lien vers les docs points par exemple)

Il y a une partie Api.fetchUser qui n'est pas expliqué, donc je ne suis pas tranquille comprendre si c'est quelque chose que nous devons traiter avec des bibliothèques comme axios ou superagent? ou est-ce quelque chose d'autre. Et sont de la saga des effets comme call, put etc.. équivalents de get, post? si oui, pourquoi sont-ils nommés? Essentiellement, je suis à essayer de comprendre une bonne façon d'effectuer un simple appel post mon api à l'adresse url example.com/sessions et de transmettre des données, comme la { email: 'email', password: 'password' }

source d'informationauteur Ilja

  1. 34

    Api.fetchUser est une fonction, où doit être réalisée l'api ajax appeler et il doit retourner à la promesse.

    Dans votre cas, cette promesse doit résoudre des données de l'utilisateur variable.

    Par exemple:

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

    Est alors 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
  });
}

    callput sont des effets créateurs de fonctions. Ils ont pas quelque chose de familier avec GET ou POST demandes.

    call fonction est utilisée pour créer l'effet de la description, qui instruit middleware pour appeler la promesse.
    put fonction crée l'effet, ce qui indique un middleware pour l'expédition d'une action de la banque.

  2. 4

    Des choses comme callputtakerace sont des effets créateur fonctions. Le Api.fetchUser est un espace réservé pour votre propre fonction qui gère les requêtes à l'API.

    Voici un exemple complet d'un 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.'}));
    }
  }
}

    Dans cet extrait, le SessionService est une classe qui implémente une login méthode qui traite la requête HTTP à l'API. Le redux-saga call va appeler cette méthode et appliquer les données de paramètre. Dans l'extrait ci-dessus, on peut alors évaluer le résultat de l'appel et l'envoi loginSuccess ou loginError actions en conséquence à l'aide de put.

    Une note de côté: L'extrait ci-dessus est un loginSaga qui écoute en permanence pour la USER_LOGIN événement, mais se casse quand un LOCATION_CHANGE qui se passe. C'est grâce à la race effet créateur.