Как сделать асинхронный запрос с помощью redux-saga - PullRequest
Новая
       13

Как сделать асинхронный запрос с помощью redux-saga

0 голосов
/ 07 января 2019

Я пытаюсь сделать запрос, чтобы получить некоторую информацию о пользователях с помощью Redx Sagas. пока у меня есть: 

function* getUserDetails() {
  const userDetails = axios.get('http://localhost:3004/user').then(response => response)
  yield put({ type: 'USER_DATA_RECEIVED', user: userDetails})
}

function* actionWatcher() {
     yield takeLatest('GET_USER_DATA', getUserDetails)
}

export default function* rootSaga() {
   yield all([
   actionWatcher(),
   ]);
}

но когда я выхожу, user возвращается как undefined или Promise<pending>. поэтому я попытался добавить в yield call(axios stuff in here)

но это тоже не сработало

у кого-нибудь есть идеи а) как правильно использовать call? и б) как пройти через полезную нагрузку с действием?

1 Ответ

0 голосов
/ 07 января 2019

Правильный способ использования эффекта call в вашем случае будет следующим: 

function* getUserDetails() {
  const userDetails = yield call(axios.get, 'http://localhost:3004/user');
  yield put({ type: 'USER_DATA_RECEIVED', user: userDetails})
}

Первый аргумент для call - это функция, которую вы хотите вызвать, последующие аргументы - это аргументы, которые вы хотите передать вызываемой функции.

Улучшенная версия

Вызовы к внешним API-интерфейсам всегда могут идти не так, поэтому рекомендуется защититься от этого, обернув блок try / catch вокруг вызова Axios.

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

function* getUserDetails() {
  let userDetails;
  try {
    userDetails = yield call(axios.get, 'http://localhost:3004/user');
  } catch (error) {
    yield put({ type: 'USER_DATA_ERROR', error });
    return;
  }
  yield put({ type: 'USER_DATA_RECEIVED', user: userDetails})
}
...