Получение местоположения и запуск запроса на основе местоположения с помощью redux-saga - PullRequest
Новая
       5

Получение местоположения и запуск запроса на основе местоположения с помощью redux-saga

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

Я не совсем понимаю, как redux-saga может помочь мне справиться с побочными эффектами, и мне нужно немного объяснить.

Вот мой случай:
Я создаю реактивное приложение, которое должно запускать запрос API на основе местоположения при достижении первого экрана, отображать загрузку при получении и отображать результаты при их получении.

К настоящему времени у меня есть 2 редуктора : устройство и рестораны

DeviceRedux.js сохраняет состояние местоположения следующим образом: 

{
  locationPermission: 'authorized', // one of 'authorized', 'denied', 'restricted' or 'undetermined'
  locationActive: true, // if locations services are turned on or not
  locationError: '',
  lastLocation: {
    lat: 12.3456,
    lng: 65.4321,
    date: '2019-22-01T12:30:00.000+01:00,
  },
  fetchingLocation: false,
}

RestaurantsRedux.js хранит состояние ресторанов следующим образом: 

{
  restaurantsList: [{
    name: 'Pizza for You',
    id: '123-oer-432',
  }, ...]
  fetchingRestaurants: false,
}

И 2 саги :
DeviceSagas.js обрабатывает саги о местоположении 

export function* getCurrentLocationSaga(action) {
  // check locations
  const locationPermission = yield call(checkLocationPermission);
  // save locationPermission in redux state
  yield put(DeviceRedux.setLocationPermission(locationPermission));

  switch (locationPermission) {
    case 'authorized'
    // 1 check if location service is enabled 
    // 2 if enabled retrieve location and save it to redux store

    // handle all other possibilities
  }
}


async function checkLocationPermission() {
  try {
    const response = await Permissions.check('location');
    return response;
  } catch (error) {
    console.log('ERROR while checking location permission', error);
    return 'denied';
  }
}

RestaurantsSagas.js обрабатывает саги о ресторанах 

export function* getRestaurantsByPosition(api, action) {
  const {
    position, 
  } = action;

  const response = yield call(api.getRestaurantsByPostion, position);

  if (response.ok) {
    yield put(RestaurantsActions.restaurantsByPositionSuccess(response.data));
  } else {
    yield handleError(response)
  }
}

Я хотел бы создать новую сагу, которая запускает getCurrentLocationSaga и ожидает ее завершения с новым местоположением, когда получил новое местоположение, а затем начал новоепоиск ресторана.Как я могу это сделать?

1 Ответ

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

Вы можете использовать take для выполнения будущих действий : 

function* watchFetchLocationsAndRestourants(action) {
  yield call(getCurrentLocationSaga, action);

  // wait for: 2 if enabled retrieve location and save it to redux store
  const foundLocationsAction = yield take('SAVE_LOCATIONS_TO_REDUX');
  const restaurants = yield call(getRestaurantsByPosition, api, {payload: foundLocationsAction.locations, type: 'YOUR_TYPE'});
}

Таким образом, вы начинаете получать текущее местоположение, и сага продолжает выполняться только после отправки SAVE_LOCATIONS_TO_REDUX. Далее вы звоните в поисках ресторанов, используя местоположения, которые у вас есть.

...