Как ждать отправки всех действий (успех / неудача после запроса) в redux-saga?

1

У меня есть следующие действия:

export function createRequest(inputValues) {
  return {
    type: actions.PERSON_CREATE_REQUEST,
    payload: {
      inputValues
    }
  };
}

export function createSuccess(person) {
  return {
    type: actions.PERSON_CREATE_SUCCESS,
    payload: {
      person: person
    }
  };
}

export function createFailure(error) {
  return {
    type: actions.PERSON_CREATE_FAILURE,
    payload: {
      error
    }
  };
}

Сага:

export function* createPerson(action) {
  try {
    const data = yield call((async () => {
      const person = action.payload.inputValues;
      return await api.post(person);
    }));
     yield put(createSuccess(data));
  } catch (error) {
    yield put(createFailure(error));
  }
}


export function* watchCreatePerson() {
  yield takeEvery('PERSON_CREATE_REQUEST', createPerson);
}

export function* rootSaga() {
  yield [
    fork(watchCreatePerson),
  ];
}

Функция, которая вызывается в форме submit:

handleSubmit = async (event, values) => {
    event.preventDefault();
      await store.dispatch(action.createRequest(values));
      if (this.props.error === null) {
        store.dispatch(reset(this.props.form));
      }
  };

После await store.dispatch(action.createRequest(values)); Я хочу проверить, PERSON_CREATE_FAILURE ли PERSON_CREATE_FAILURE или PERSON_CREATE_SUCCESS. На PERSON_CREATE_FAILURE я установил error в хранилище, которая сопоставлена с реквизитами. Но следующая строка кода с if вызывается после PERSON_CREATE_REQUEST. Но мне нужно дождаться PERSON_CREATE_FAILURE или PERSON_CREATE_SUCCESS. Как изменить сагу, чтобы дождаться отправки этих действий?

Теги:
redux
redux-saga

1 ответ

0

В функции handleSubmit просто createRequest действие createRequest, не ждите ответа на этот момент в вашем коде.

Теперь, если запрос не удался, напишите редуктор для обработки действия PERSON_CREATE_FAILURE. Внутри этого редуктора вы можете установить состояние приложения соответствующим образом, то есть сбросить состояние формы. Затем, используя MapStateToProps для вашего компонента, который включает вашу форму, вы MapStateToProps, будет автоматически перерисовываться, чтобы соответствовать состоянию формы обновления (и в этом случае сбросить).

Обратите внимание, что при таком подходе вам нужно будет создать свое состояние формы в хранилище Redux, но это упростит жизненный цикл приложения.

  • 0
    Я использую избыточную форму, чтобы она была подключена к магазину. и у меня есть MapStateToProps. Проблема в порядке. Как это работает сейчас: PERSON_CREATE_REQUEST, мой код с формой сброса, потому что ошибка не обновляется, PERSON_CREATE_SUCCESS / PERSON_CREATE_FAILURE. Я хочу, чтобы он отправлял PERSON_CREATE_REQUEST и PERSON_CREATE_SUCCESS / PERSON_CREATE_FAILURE, а затем код с сбросом формы при обновлении моей ошибки.
  • 0
    Суть в том, что я не вижу необходимости ожидать результата действия createRequest в вашей функции handleSubmit. Вы можете добиться желаемого поведения с помощью ваших редукторов и React.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню