web-dev-qa-db-fra.com

Appels api asynchrones avec redux-saga

Je suis documentation redux-saga sur les assistants, et jusqu'à présent, cela semble assez simple, mais je suis tombé sur un problème lorsqu'il s'agit d'effectuer un appel api (comme vous verrez le lien vers les points de documentation) à un tel exemple)

Il y a une partie Api.fetchUser ce n'est pas expliqué, donc je ne comprends pas si c'est quelque chose que nous devons gérer avec des bibliothèques comme axios ou superagent ? ou est-ce autre chose. Et les effets de saga comme call, put etc. équivalents de get, post? si oui, pourquoi sont-ils nommés ainsi? Essentiellement, j'essaie de trouver un moyen correct d'effectuer un simple appel de poste à mon API à l'url example.com/sessions et lui transmettre des données comme { email: 'email', password: 'password' }

javascriptapireactjsreduxredux-saga
24
Ilja

Api.fetchUser est une fonction, où doit être effectuée un appel api ajax et doit renvoyer la promesse.

Dans votre cas, cette promesse devrait résoudre la variable de données utilisateur.

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

Alors, les 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 sont des fonctions de création d'effets. Ils ne connaissent pas les requêtes GET ou POST.

La fonction call est utilisée pour créer une description de l'effet, qui demande au middleware d'appeler la promesse. La fonction put crée un effet, dans lequel le middleware envoie une action au magasin.

45
1ven

Des choses comme call, put, take, race sont des fonctions de création d'effets. Le Api.fetchUser est un espace réservé pour votre propre fonction qui gère les demandes d'API.

Voici un exemple complet d'une 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 méthode login qui gère la requête HTTP à l'API. La redux-saga call appellera cette méthode et lui appliquera le paramètre data. Dans l'extrait ci-dessus, nous pouvons ensuite évaluer le résultat de l'appel et répartir les actions loginSuccess ou loginError en conséquence en utilisant put.

Remarque: l'extrait ci-dessus est un loginSaga qui écoute en permanence le USER_LOGIN événement, mais s'arrête lorsqu'un LOCATION_CHANGE arrive. C'est grâce au créateur d'effet race.

5
VanDanic