Calling an API on React Final Form submission

Viewed 207

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!

Here is a simplified example on CodeSandbox

1 Answers

Swapping the order of your middleware in createStore seems to have fixed it?

composeEnhancers(applyMiddleware(thunk, reduxPromiseListener.middleware))

instead of

composeEnhancers(applyMiddleware(reduxPromiseListener.middleware, thunk))

Do not ask me why. I haven't looked into these libs in 3 years.

Related