React / Redux - отправка нескольких запросов на исправление onBlur - PullRequest
Новая
       5

React / Redux - отправка нескольких запросов на исправление onBlur

0 голосов
/ 20 февраля 2019

Я использую Redux-форму для редактирования информации о госте.При выходе из поля содержимое поля обновляется гостю с помощью простого запроса исправления, и хранилище обновляется.У меня проблема в том, что если я использую формы Google, которые редактируют несколько полей одновременно, функция onBlur отправляет все запросы одновременно.Это вызывает ошибку: 

Unhandled Rejection (Error): Guest is already patching

Как сделать так, чтобы гости могли обновляться параллельно? 

export function patchGuest(guest) {
  return (dispatch, getState) => {
    if (shouldPatchGuest(getState())) {
      dispatch(apiPatchGuest());
      return BookingApi.patchGuest(guest.id, guest.json())
        .then(response => {
          const json = response.data;
          const updatedGuest = Guest.asGuest(json);
          dispatch(setStateUpdateGuest(updatedGuest));
        })
        .catch(err => {
          dispatch(apiError(err));
          throw err;
        });
    }
    return Promise.reject(new Error('Guest is already patching'));
  };
}

- 

patchOnBlur = (event) => {
    const { meta: { dirty, error }, dispatch, currentGuest, fieldName } = this.props;
    if (dirty && !error) {
      const patched = currentGuest.patch({
        [fieldName]: event.target.value
      });
      dispatch(patchGuest(patched));
    }
  };

Заранее спасибо.

1 Ответ

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

Закончилась установка redux-saga и решена путем постановки запросов в очередь.Не стесняйтесь исправить это или прийти с улучшениями.Это ни в коем случае не законченный код. 

function* patchGuest(action) {
  const dataToPatch = {
    action.fieldName: action.fieldValue,
  }
  try {
    yield call(
      Api.patchGuest, 
      action.id,
      dataToPatch
    );
    yield put({ 
      type: "BOOKING_SET_STATE_UPDATE_GUEST",
      id: action.id, 
      fieldName: action.fieldName, 
      fieldValue: action.fieldValue 
    });
  } catch (e) {
    // yield put({ type: "GUEST_PATCH_FAILED", message: e.message });
  }
}

function* watchPatchGuest() {
  const requestChan = yield actionChannel('SAGA_BOOKING_API_PATCH')
  while (true) {
    const payload = yield take (requestChan);
    yield call(patchGuest, payload)
  }
}
...