CODEWITHSUNDEEP
reactjsreduxredux-form
Adam
Adam

Reputation: 1755

Handling AJAX Errors with Redux Form

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?
  }
}

Upvotes: 0

Views: 891

Answers (2)

1ven
1ven

Reputation: 7016

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)

Upvotes: 3

floriangosse
floriangosse

Reputation: 1123

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

Upvotes: 1

Related Questions