title: redux-form: throw SubmissionError after server validation error
body: <p>I've been trying to use redux-form (v6.5.0) with submit validation and throwing a SubmissionError after server validation error on login.</p>
  
  <p>In the example here <a href="http://redux-form.com/6.5.0/examples/submitValidation/" rel="nofollow noreferrer">Submit Validation Example</a>, the submit function uses a promise and throw a SubmissionError on a callback error, which works fine for me if I follow this workflow. But in my case I want to dispatch a login action on submit form and use a reducer to change the state in the store.</p>
  
  <p>Here is a basic example of what I'm trying to do:</p>
  
  <p><strong>LoginForm.js</strong></p>
  
  <pre><code>const LoginForm = ({handleSubmit, submitting, error,}) =&gt; {
    ...
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;div&gt;
          &lt;Field name="email" component="input" type="email" component={renderField} label="Email" validate={email}/&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;Field name="password" component="input" type="password" component={renderField} label="Password" validate={required}/&gt;
        &lt;/div&gt;
        &lt;button type="submit" disabled={submitting}&gt;Log In&lt;/button&gt;
      &lt;/form&gt;
    )
  }
  
  export default reduxForm({
    form: 'loginForm'
  })(LoginForm)
  </code></pre>
  
  <p><strong>LoginPage.js</strong></p>
  
  <pre><code>class LoginPage extends Component {
  
    handleSubmit = (values) =&gt; {
      this.props.dispatch(login(values));
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.props.fetching &amp;&amp; &lt;p&gt;LOGGING IN...&lt;/p&gt;}
          &lt;LoginForm onSubmit={this.handleSubmit} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>As you can see, <code>handleSubmit</code> only dispatches the login action and is not aware of the server error that will occur.</p>
  
  <p><strong>Login action</strong> looks like this:</p>
  
  <pre><code>function login({ email, password }) {
    return function(dispatch) {
      dispatch({type: "LOGIN_USER_PENDING"})
      setTimeout(() =&gt; {
        dispatch({type: "LOGIN_USER_REJECTED", payload: "Invalid username or password"})
      }, 2000);
    }
  }
  </code></pre>
  
  <p><strong>Reducer</strong> looks like this:</p>
  
  <pre><code>case "LOGIN_USER_PENDING":
    return {...state, fetching: true}
  case "LOGIN_USER_REJECTED":
    return {...state, fetching: false, error: action.payload}
  </code></pre>
  
  <p>I can successfully identify the error in the LoginPage but I cannot throw the SubmissionError outside of the handleSubmit function.</p>
  
  <p><strong>Questions:</strong></p>
  
  <ol>
  <li>Is there a way to throw this SubmissionError from another function in the component lifecycle? </li>
  <li>If not, how to achieve that? Am I doing this wrong by dispatching the login action from submit, not using a promise from here?</li>
  </ol>
  
  <p>Thanks.</p>