Выполнение вызова 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
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.log(e)
  });
}

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

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