Handling AJAX Errors with Redux Form

Question

I'm new to React/Redux so I'm building a simple blog app with Redux Form to help me learn. Right now I'm unclear on how I would handle ajax errors when submitting data from the form to the api in my action. The main issue is that I'm using the onSubmitSuccess config property of Redux Form and it seems to always be called, even when an error occurs. I'm really unclear on what triggers onSubmitSuccess or onSubmitFail. My onSubmitFail function is never executed, but my onSubmitSuccess function always is, regardless of whether an error occurred or not.

I read about SubmissionError in the redux-form docs, but it says that the purpose of it is "to distinguish promise rejection because of validation errors from promise rejection because of AJAX I/O". So, it sounds like that's the opposite of what I need.

I'm using redux-promise as middleware with Redux if that makes any difference.

Here's my code. I'm intentionally throwing an error in my server api to generate the error in my createPost action:

Container with my redux form

PostsNew = reduxForm({
  validate,
  form: 'PostsNewForm',
  onSubmit(values, dispatch, props) {
    // calling my createPost action when the form is submitted.
    // should I catch the error here?
    // if so, what would I do to stop onSubmitSuccess from executing?
    props.createPost(values)
  }
  onSubmitSuccess(result, dispatch, props) {
    // this is always called, even when an exeption occurs in createPost()
  },
  onSubmitFail(errors, dispatch) {
    // this function is never called
  }
})(PostsNew)

Action called by onSubmit

export async function createPost(values) {
  try {
    const response = await axios.post('/api/posts', values)
    return {
      type: CREATE_POST,
      payload: response
    }
  } catch (err) {
    // what would I do here that would trigger onSubmitFail(),
    // or stop onSubmitSuccess() from executing?
  }
}

1ven · Accepted Answer · 2017-10-14 11:07:48Z

3

In your case, redux-form doesn't know whether form submission was succeeded or not, because you are not returning a Promise from onSubmit function.

In your case, it's possible to achieve this, without using redux-promise or any other async handling library:

PostsNew = reduxForm({
  validate,
  form: 'PostsNewForm',
  onSubmit(values, dispatch, props) {
    // as axios returns a Promise, we are good here
    return axios.post('/api/posts', values);
  }
  onSubmitSuccess(result, dispatch, props) {
    // if request was succeeded(axios will resolve Promise), that function will be called
    // and we can dispatch success action
    dispatch({
      type: CREATE_POST,
      payload: response
    })
  },
  onSubmitFail(errors, dispatch) {
    // if request was failed(axios will reject Promise), we will reach that function
    // and could dispatch failure action
    dispatch({
      type: CREATE_POST_FAILURE,
      payload: errors
    })
  }
})(PostsNew)

answered Oct 14, 2017 at 11:07

1ven

7,0361 gold badge29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Over a year ago

This works great. For some reason I assumed that things like ajax calls should only be handled inside of your actions. I hadn't considered doing it inside of my onSubmit function.

floriangosse · Accepted Answer · 2017-10-13 05:29:56Z

1

For handling asynchronous actions you should use redux-thunk, redux-saga or an other middleware which makes it possible to run asynchronous code.

edited Oct 13, 2017 at 5:29

answered Oct 13, 2017 at 5:03

floriangosse

1,1331 gold badge10 silver badges22 bronze badges

1 Comment

Adam Over a year ago

I'm aware that using middleware is the best approach for handling asynchronous actions. I don't know if you noticed that I said that I'm using redux-promise middleware in my question? I could use redux-thunk instead, but my problem is that I don't know what to do to handle the error when using this middleware. I don't know what would cancel the onSubmitSuccess function I have configured with redux-form, or what would trigger onSubmitFail instead. The question is about how to handle the errors with redux-form specifically.

Collectives™ on Stack Overflow

Handling AJAX Errors with Redux Form

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related