javascript - sagas - redux thunk

Llamadas api asincrónicas con redux-saga

Question

Estoy siguiendo la documentación de redux-saga sobre ayudantes, y hasta ahora parece bastante sencillo, sin embargo, me encontré con un problema cuando se trata de realizar una llamada de API (como verá el enlace a los puntos de los documentos a tal ejemplo)

Hay una parte Api.fetchUser que no se explica, por lo tanto, no entiendo en silencio si eso es algo que tenemos que manejar con bibliotecas como axios o superagente . o es eso otra cosa. ¿Y son efectos de saga como call, put etc. equivalentes de get, post ? si es así, ¿por qué se nombran de esa manera? Básicamente, estoy tratando de encontrar una manera correcta de realizar una simple llamada posterior a mi API en url example.com/sessions y pasarle datos como { email: ''email'', password: ''password'' }

Answer 1

Cosas como call , put , take , race son funciones creadoras de efectos. El Api.fetchUser es un marcador de posición para su propia función que maneja las solicitudes API.

Aquí hay un ejemplo completo de 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.''}));
    }
  }
}

En este fragmento, el SessionService es una clase que implementa un método de login que maneja la solicitud HTTP a la API. La call redux-saga call a este método y le aplicará el parámetro de datos. En el fragmento anterior, podemos evaluar el resultado de la llamada y despachar las acciones loginSuccess o loginError acuerdo con el uso de put .

Una nota al margen: el fragmento de arriba es un loginSaga que continuamente escucha el evento USER_LOGIN , pero se rompe cuando ocurre un LOCATION_CHANGE . Esto es gracias al creador del efecto race .

Answer 2

Api.fetchUser es una función, donde se debe realizar la llamada api ajax y debe devolver la promesa.

En su caso, esta promesa debería resolver la variable de datos del usuario.

Por ejemplo:

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

Entonces es 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 son funciones de creadores de efectos. No tienen algo familiarizado con las solicitudes GET o POST .

call función de call se usa para crear la descripción del efecto, que ordena al middleware que invoque la promesa. put función put crea efecto, en la que instruye al middleware para que envíe una acción a la tienda.