I'm using React Final Form, and would like to call an API when clicking Submit on my form.
I'm attempting to follow the "Async Redux Submission" example and getting stuck. I'm using the MakeAsyncFunction from react-redux-promise-listener, and can see the Action defined in start getting dispatched, but struggle to understand what should be picking it up in order to do something with it - i.e. call this API I want to use.
Simplified form code below:
<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>
I have a Reducer which can pick up this action, but I know it's bad practice to do things like external calls within Reducers so I'm steering clear of that.
What should I be doing to process that dispatched action?
I'm using the Redux-Thunk middleware to make my API calls, which are defined with Action Creators. These are fine elsewhere in my app, but it's hooking them up to Form submission I'm totally stuck on.
I've seen a similar question asked here but failed to understand the answer (even though it's by the library's author!), so I was hoping someone would be able to help me further. I'm pretty new to React, and web development generally (C#.NET APIs and databases are more my field), so any advice is greatly appreciated. Thanks!