Я использую React Final Form и хочу вызвать API при нажатии кнопки «Отправить» в моей форме.
Я пытаюсь следовать примеру, используя Async Redux Submission, и застреваю . Я использую MakeAsyncFunction
из response-redux-prom-listener и можно увидеть, как действие, определенное в start
, отправляется, но изо всех сил пытается понять, что должно его поднять, чтобы что-то с ним сделать, т.е. вызвать этот API, который я хочу использовать.
Упрощенный код формы ниже:
<MakeAsyncFunction
listener={promiseListener}
start={'FORM_SUBMIT'}
resolve={'FORM_COMPLETE'}>
{submit_form => {
return (
<Form onSubmit={submit_form}
render={({ submitting, handleSubmit }) => (
<form onSubmit={handleSubmit}>
<Paper>
<Grid container>
<<fields>>
</Grid>
<Grid>
<Button type="submit"
disabled={submitting}>
Submit
</Button>
</Grid>
</Paper>
</form>
)} />
);
}}
</MakeAsyncFunction>
У меня есть Reducer, который может выполнять это действие, но я знаю, что делать такие вещи, как внешние вызовы внутри Reducers, - плохая практика, поэтому я избегаю этого.
Что мне делать, чтобы обработать это отправленное действие?
Я использую промежуточное программное обеспечение Redux-Thunk для выполнения вызовов API, которые определены с помощью Action Creators. Они хороши в другом месте в моем приложении, но они подключают их к отправке формы, на которой я полностью застрял.
Я видел, что аналогичный вопрос задавали здесь, но не понял ответа (хотя это автор библиотеки!), поэтому я надеялся, что кто-то сможет мне помочь. Я новичок в React и в веб-разработке в целом (C # .NET API и базы данных - это больше моя область), поэтому я очень благодарен за любые советы. Спасибо!