title: Redux-form handleSubmit: How to access store state?
body: <p><strong>In a redux-form <code>handleSubmit</code> function, which makes an Ajax call, some properties from the Redux state are needed in the Ajax (e.g. user ID).</strong></p>
  
  <p>This would be easy enough if I wanted to define <code>handleSubmit</code> in the form's component: Just call <code>mapStateToProps</code> to pass in whatever I need, and read it from <code>this.props</code> in my <code>handleSubmit</code>.</p>
  
  <p>However, like a good React-Redux developer I write <strong>separate view components and containers</strong>, so my view components can be simple with little or no behavior. Therefore, I want to <strong>define handleSubmit in my container</strong>.</p>
  
  <p>Again, simple - redux-form is set up to do that. Define an <code>onSubmit</code> in <code>mapDispatchToProps</code>, and the form will call it automatically. </p>
  
  <p>Except, oh wait, in <code>mapDispatchToProps</code> there's no way to access redux state. </p>
  
  <p>Okay, no problem, I'll just pass the props I need into <code>handleSubmit</code> along with the form values.</p>
  
  <p>Hmm, wait, it is impossible to pass any data into <code>handleSubmit</code> using this mechanism! You get one parameter, <code>values</code>, and there's no way to add another parameter. </p>
  
  <p>This leaves the following unattractive alternatives (of which I can verify that 1 and 2 work):</p>
  
  <p>1 <strong>Define a submit handler in the form component,</strong> and from there call my own custom submit handler function passed in from mapDispatchToProps. This is okay, but requires my component to know some props from the redux state that aren't required to display the form. (This issue is not unique to redux-form.)</p>
  
  <pre><code>dumbSubmit(values)
  {
    const { mySubmitHandler, user} = this.props;
    mySubmitHandler(values, user);
  }
  
  &lt;form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }&gt;
  </code></pre>
  
  <p>Or, more concisely, this can all be combined into an arrow function:</p>
  
  <pre><code>&lt;form onSubmit={ handleSubmit((values)=&gt;{mySubmitHandler(values, this.props.user);}
  </code></pre>
  
  <p>Then to make this handler completely agnostic, it could just pass the entire this.props back to the custom handler:</p>
  
  <pre><code>&lt;form onSubmit={ handleSubmit((values)=&gt;{mySubmitHandler(values, this.props);}
  </code></pre>
  
  <p>2 <strong>Define onSubmit in mergeProps</strong> instead of mapDispatchToProps, so it has access to stateProps. <a href="https://github.com/reactjs/react-redux/issues/237#issuecomment-168818326" rel="noreferrer">Dan Abramov recommends against using mergeProps (for performance reasons)</a>, so this seems suboptimal. </p>
  
  <pre><code>  function mergeProps(stateProps, dispatchProps, ownProps) {
    const { user } = stateProps.authReducer;
    const { dispatch } = dispatchProps;
    return {
      ...ownProps,
      ...dispatchProps,
      ...stateProps,
       onSubmit: (values) =&gt; {
         const { name, description } = values;
         const thing = new Thing(name, description, []);
         dispatch(createNewThing(thing, user.id));
       }
    }
  </code></pre>
  
  <p>3 <strong>Copy the state properties into redux-form fields</strong> which are not mapped to any input controls in the form component. This will ensure they are accessible in the <code>values</code> parameter passed back to <code>handleSubmit</code>. This seems like kind of a hack.</p>
  
  <h2>There's got to be a better way!</h2>
  
  <p><strong>Is there a better way?</strong></p>