Выполнение вызова ajax с использованием redux-saga и обновление хранилища

Я новичок во всем окружении React, и я пытаюсь создать запрос GET в Google Api, используя библиотеку redux-saga.

Мне не хватает двух вещей. Первая проблема в том, что моя функция саги вызывается снова и снова навсегда (понятия не имею, почему).

Во-вторых, как правильно передать данные редуктору.

Вот моя сага:

function* watchAutoCompleteFetch() {
  yield takeLatest(UPDATE_ZIP_AUTOCOMPLETE, requestAutoComplete);
}

function requestAutoCompleteApi() {
  return fetch(
    'some-url-here'
  ).then((response) => response.json())
  .then((json) => json)
  .catch((e) => {
    put({type: "AUTOCOMPLETE_ZIP_FETCH_FAILED", message: e.message});
  });
}

function* requestAutoComplete() {
  const data = call(requestAutoCompleteApi);
  yield put(updateZipAutoCompleteAction(data));
}

И функция редуктора:

const updateZipAutoComplete = (state, data) => {
  debugger;
  return state;
};

В reducer я получаю данные как своего рода объект вызова из redux-saga, а не обещание или данные.

Есть идеи, что я делаю не так?

Похоже, мне не хватало заявления о доходности. В любом случае функция вызывается навсегда, это ожидаемое поведение или нет?

Michal Takáč 11.04.2018 14:53

Хорошо, обнаружил проблему, скоро отправлю ответ.

Michal Takáč 11.04.2018 15:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
704
1

Ответы 1

Итак, оказалось, что действительно было 2 проблемы. Во-первых, мне не хватало ключевого слова yield, во-вторых, я всегда вызывал один и тот же редуктор, который снова запускал событие отправки, и он перешел в цикл и работал вечно.

Реальные решения выглядят так:

function* watchAutoCompleteFetch() {
  yield takeLatest(UPDATE_ZIP_AUTOCOMPLETE, requestAutoComplete);
}

function requestAutoCompleteApi() {
  return fetch(
    'some-url-here'
  ).then((response) => response.json())
  .catch((e) => {
    console.info(e)
  });
}

function* requestAutoComplete() {
  const data = yield call(requestAutoCompleteApi);
  if (data.status == = "OK") {
    yield put(updateZipAutoCompleteSucceedAction(data));
  } else {
    yield put(updateZipAutoCompleteFailedAction(data));
  }
}

Другие вопросы по теме