title: How to chain multiple remote submits in Redux Form v6
body: <p>I am using Redux Form with several different forms on one page and I need them to remain separate forms. I would like to be able to submit one of them and have it chain to validate and submit all of the other forms. If any one of them are invalid, it should not submit anything.</p>
  
  <p>I am currently trying to accomplish this by using <a href="http://redux-form.com/6.4.0/examples/remoteSubmit/" rel="nofollow noreferrer">remote submit</a> along with the <a href="http://redux-form.com/6.4.0/docs/api/Form.md/" rel="nofollow noreferrer">Form</a> component. I am also using <a href="https://github.com/gaearon/redux-thunk" rel="nofollow noreferrer">redux-thunk</a>. However, I am having trouble because the submit action is not a promise that can be chained after it is resolved - instead redux-form fires off a variety of actions internally that I have no real way to tap into. I've tried to address this by wrapping my submit in a Promise but it never has a chance to finish before the other form submits (and changes the page of my app). Here is what I'm trying:</p>
  
  <p><strong>First Form</strong></p>
  
  <pre><code>class FirstForm extends Component {
    submit = (values) =&gt; {
      // do stuff with values here
    }
  
     render() {
       return (
         &lt;Form onSubmit={handleSubmit(this.submit)}&gt;
           &lt;Field ... /&gt;
         &lt;/Form&gt;
       );
     }
  }
  
  export default reduxForm({ form: 'firstForm', validate })(FirstForm);
  </code></pre>
  
  <p><strong>Second Form</strong></p>
  
  <pre><code>class SecondForm extends Component {
    submit = (values) =&gt; {
      // fire off bound action
      this.props.submitSecondForm(values);
    }
  
     render() {
       return (
         &lt;Form onSubmit={handleSubmit(this.submit)}&gt;
           &lt;Field ... /&gt;
         &lt;/Form&gt;
       );
     }
  }
  
  export default reduxForm({ form: 'secondForm', validate })(SecondForm);
  </code></pre>
  
  <p><strong>actionCreators.js</strong></p>
  
  <pre><code>import { submit } from 'redux-form';
  
  // wrap first submit in Promise so that is is chainable
  function submitFirstForm(dispatch) {
    return new Promise(resolve =&gt; {
      dispatch(submit('firstForm'));
      resolve(); // &lt;-- want to resolve AFTER firstForm successfully submits
    });
   }
  
  // use redux-thunk to submit firstForm and then call secondForm action afterwards
  export function submitSecondForm(values) {
    return dispatch =&gt; {
      submitFirstForm(dispatch).then(() =&gt; {
        dispatch(actionNeededForSecondFormSubmit).then(() =&gt; {
          // all finished!
        });
      });
    }
  }
  </code></pre>
  
  <p>With this, someone should be able to use remote submit and call <code>submit('secondForm')</code> and have it finish both actions. However, because I <code>resolve()</code> the Promise immediately on that first action creator, it will not wait until the first form is finished. With this design, the general flow would be:</p>
  
  <pre><code>SECOND FORM STARTS SUBMIT -&gt; FIRST FORM STARTS SUBMIT -&gt; FIRST FORM FINISHES SUBMIT -&gt; SECOND FORM FINISHES SUBMIT
  </code></pre>
  
  <p>Maybe that is not the best design. I am happy to reconsider the design as long as the end behavior is that both forms try to submit and if one of them fails, submission fails for all. I'm also not married to redux-thunk and willing to use other libraries. I've considered trying to use <a href="https://github.com/redux-saga/redux-saga" rel="nofollow noreferrer">redux-saga</a> to yield to some of the redux-form internal actions but that sounds incredibly hacky and not a good design pattern at all. Does anyone know how to accomplish this?</p>