Асинхронные вызовы api с сокращением саги

Я следую документации по редукции саги на помощников, и пока это выглядит довольно прямолинейно, однако я наткнулся на проблему, когда она приходит для выполнения вызова api (так как вы увидите ссылку на точки документов на такой пример)

Есть часть Api.fetchUser, которая не объясняется, поэтому я не понимаю, если это то, что нам нужно обрабатывать с такими библиотеками, как axios или superagent? или это что-то еще. И есть эффекты саги, такие как call, put и т.д. Эквиваленты get, post? если да, то почему они названы именно так? По сути, я пытаюсь найти правильный способ выполнить простой почтовый вызов для моего api по адресу url example.com/sessions и передать его таким данным, как { email: 'email', password: 'password' }

Ответы

Ответ 1

Api.fetchUser - это функция, где должен выполняться вызов api ajax, и он должен возвращать обещание.

В вашем случае это обещание должно разрешить переменную пользовательских данных.

Например:

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

Тогда 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 - это функции создателей эффектов. Они не знакомы с запросами GET или POST.

Функция

call используется для создания описания эффекта, в котором инструктирует промежуточное программное обеспечение для вызова обещания. Функция put создает эффект, в котором инструктирует промежуточное программное обеспечение для отправки действия в хранилище.

Ответ 2

Такие вещи, как call, put, take, race, являются функциями создателя эффектов. Api.fetchUser является заполнителем для вашей собственной функции, которая обрабатывает запросы API.

Вот полный пример 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.'}));
    }
  }
}

В этом фрагменте SessionService - это класс, реализующий метод login, который обрабатывает HTTP-запрос API. Редукционная сага call вызовет этот метод и применит к нему параметр данных. В приведенном выше фрагменте мы можем затем оценить результат вызова и отправить действия loginSuccess или loginError, используя put.

Замечание: фрагмент выше - loginSaga, который постоянно прослушивает событие USER_LOGIN, но прерывается, когда происходит событие LOCATION_CHANGE. Это благодаря создателю эффекта race.