У меня есть следующие действия:
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
. Как изменить сагу, чтобы дождаться отправки этих действий?
В функции handleSubmit
просто createRequest
действие createRequest
, не ждите ответа на этот момент в вашем коде.
Теперь, если запрос не удался, напишите редуктор для обработки действия PERSON_CREATE_FAILURE
. Внутри этого редуктора вы можете установить состояние приложения соответствующим образом, то есть сбросить состояние формы. Затем, используя MapStateToProps
для вашего компонента, который включает вашу форму, вы MapStateToProps
, будет автоматически перерисовываться, чтобы соответствовать состоянию формы обновления (и в этом случае сбросить).
Обратите внимание, что при таком подходе вам нужно будет создать свое состояние формы в хранилище Redux, но это упростит жизненный цикл приложения.