Рефакторинг с Redux-thunk на Redux-saga (+axios)

Question

UPD: ответ на вопрос прикреплён ниже

Прошу помощи с новой для меня технологией Redux-saga, а именно с рефакторингом кода ниже. Любые идеи или разъяснения приветствуются. Код ниже получает список отелей из API по запросу с параметрами из функции. У него так же есть проверка на то, загружаются ли сейчас данные или их нет вовсе. В случае, если данные получены успешно отрабатывает action creator setHotels. Заранее спасибо за ответ.

export const getHotels = (cityName = 'moscow', date = currentDate(), days = 1, limit = 30) => {
return async (dispatch) => {
    dispatch(setIsFetching(true))
    dispatch(setIsEmpty(false))
    try {
        const response = await axios.get(`http://engine.hotellook.com/api/v2/cache.json?location=${cityName}&currency=rub&checkIn=${date}&checkOut=${addDays(date, days)}&limit=${limit}`)
        response.data.length === 0 ? dispatch(setIsEmpty(true)) : dispatch(setHotels(response.data))
    }
    catch (e) {
        dispatch(setIsEmpty(true))
    }
}

}

Answer 1

Исправленная версия с Redux-thunk на Redux-saga

hotelsSaga.js

import { put, takeLatest } from "redux-saga/effects";

function* fetchHotelsSaga(data) {
  yield put(setIsFetching(true));
  yield put(setIsEmpty(false));
  try {
    const response = yield axios.get(`http://engine.hotellook.com/api/v2/cache.json?location=${data.cityName}&currency=rub&checkIn=${data.date}&checkOut=${addDays(data.date, data.days)}&limit=${data.limit}`);
    response.data.length === 0
      ? yield put(setIsEmpty(true))
      : yield put(setHotels(response.data));
  } catch (e) {
    yield put(setIsEmpty(true));
  }
}

function* hotelsSaga() {
  yield takeLatest(FETCH_HOTELS, fetchHotelsSaga);
}

hotelsReducer.js

const SET_HOTELS = "SET_HOTELS";
const SET_IS_FETCHING = "SET_IS_FETCHING";
const SET_IS_EMPTY = "SET_IS_EMPTY";

export const FETCH_HOTELS = "FETCH_HOTELS";

const defaultState = {
  hotels: [],
  isFetching: true,
  isEmpty: false,
};

export const hotelsReducer = (state = defaultState, action) => {
  switch (action.type) {
    case SET_HOTELS:
      return {
        ...state,
        hotels: action.payload,
        isFetching: false,
      };
    case SET_IS_FETCHING:
      return {
        ...state,
        isFetching: action.payload,
      };
    case SET_IS_EMPTY:
      return {
        ...state,
        isEmpty: action.payload,
      };
    default:
      return state;
  }
};

export const setHotels = (results) => {
  return { type: SET_HOTELS, payload: results };
};
export const setIsFetching = (bool) => {
  return { type: SET_IS_FETCHING, payload: bool };
};
export const setIsEmpty = (bool) => {
  return { type: SET_IS_EMPTY, payload: bool };
};

export const fetchHotels = (cityName, date, days, limit) => {
  return { type: FETCH_HOTELS, payload: {cityName: cityName, date: date, days: days, limit: limit}};
};

my appreciation to Martin Kadlec

БЛОГ НА HUSL

Рефакторинг с Redux-thunk на Redux-saga (+axios)

Ответы (1 шт):