How to manage submission errors on react final form when using a redux action on onSubmit?

Question

I was trying to migrate from redux form to react final form, and been facing issues with handling submission errors on redux actions. My onSubmit looks like:

  onSubmit = formValues => {
this.props.login(formValues);
};

And my login action is:

export const login = ({ username, password }) => async dispatch => {
  
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  
  const body = JSON.stringify({ username, password });

  try {
    const res = await axios.post('/api/auth/login', body, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: LOGIN_FAIL
    });
    
  }
};

Previously while using redux form, I was using stopSubmit to display the submission errors. What would be the best way to achieve the same thing with react final form?

Answer 1

I managed to solve this soon after.

Had to change onSubmit to:

onSubmit = values => {
    let errors = this.props.login(values);
    return errors.then(result => result);
  };

and the login action creator to:

try {
    const res = await axios.post('/api/auth/login', body, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: LOGIN_FAIL
    });
    return err.response.data;
  }