title: Redux- Form: Unable to Dispatch Action on Submit
body: <p>I'm using redux-form in my React / Redux application, and I'm trying to figure out how to dispatch an action on submit.</p>
  
  <p>I have been able to trigger the handleSubmit function, and the submit function that I pass to it is executed, but the 'submitFormValues' action is not called.</p>
  
  <p>I've tried using mapDispatchToProps and connect(), but that doesn't work either. </p>
  
  <p>The Redux-Form actions execute (START_SUBMIT, STOP_SUBMIT, SET_SUBMIT_SUCCEEDED), but my own action creator is never executed.</p>
  
  <p>Here's the form:</p>
  
  <pre><code>import React from "react";
  import { Field, reduxForm } from "redux-form";
  import {submitFormValues} from "../../../actions/BasicFormActions";
  
  
  function submit(values) {
      //Can log the values to the console, but submitFormValues actionCreator does not appear to be dispatched.
      return new Promise(function(resolve) { resolve(submitFormValues(values))} )
  }
  
  const renderField = ({ input, label, type, meta: {touched, error} }) =&gt; (
      &lt;div&gt;
          &lt;label&gt;{label}&lt;/label&gt;
          &lt;div&gt;
              &lt;input {...input} placeholder={label} type={type}/&gt;
              {touched &amp;&amp; error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;}
          &lt;/div&gt;
      &lt;/div&gt;
  )
  
  const BasicForm = (props) =&gt; {
      const { error, handleSubmit, pristine, reset, submitting } = props;
      return (
          &lt;form onSubmit={handleSubmit(submit)}&gt;
              &lt;Field name="firstName" type="text" component={renderField} label="First Name"/&gt;
              &lt;Field name="lastName" type="text" component={renderField} label="Last Name"/&gt;
              {error &amp;&amp; &lt;strong&gt;{error}&lt;/strong&gt;}
              &lt;div&gt;
                  &lt;button type="submit" disabled={submitting}&gt;Submit&lt;/button&gt;
                  &lt;button type="button" disabled={pristine || submitting} onClick={reset}&gt;Clear&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      )
  }
  
  
  
  export default reduxForm({
      form: "basicForm",
      submit
  })(BasicForm)
  </code></pre>
  
  <p>Here's the action Creator (uses Thunk). I'm able to dispatch these actions successfully, just not from the form.</p>
  
  <pre><code> export const submitFormValues = (values) =&gt; (dispatch) =&gt;
          getData("submitApproveForm", values).then(response =&gt; {
              dispatch(formSubmissionError(response))
          }).catch(error =&gt; {
              throw (error);
          });
  
  const formSubmissionError = (response) =&gt;
      ({
          type: types.FORM_SUBMISSION_ERROR,
          basicFormResponse: { ...response}
      });
  
  
  export const getData = (apiName, args) =&gt;
      fetch(settings.basePath + getUrl(apiName, args))
          .then(response =&gt;
      response.json()
      ).catch(error =&gt; {
          return error;
      });
  </code></pre>
  
  <p>Finally my reducer:</p>
  
  <pre><code>import * as types from "../actions/ActionsTypes";
  import initialState from "./initialState";
  
  const basicFormReducer = (state = initialState.basicFormResponse, action) =&gt; {
      switch (action.type) {
          case types.FORM_SUBMISSION_ERROR:
              return {...state, "errors": action.basicFormResponse}; // returns a new state
          case types.FORM_SUBMISSION_SUCCESS:
              return {...state, "successes": action.basicFormResponse}; // returns a new state
          default:
              return state;
      }
  };
  
  export default basicFormReducer;
  </code></pre>
  
  <p>Thank you in advance for your help.</p>