title: Best way to submit FORM data with React Redux?
body: <p>I am kind of stumped on this simple issue! I want to simply take my form data, validate it, submit it and submit a post request to the Express API. But before that, I don't think I have a thorough understanding of how to accomplish this. I looked at <a href="https://stackoverflow.com/questions/36464442/handling-submit-in-react-redux-form">this</a> question and <a href="https://stackoverflow.com/questions/33237818/react-redux-whats-the-best-way-to-handle-crud-in-a-form-component">these</a> and bunch of others but I am not sure this is the best approach.</p>
  
  <p>This is how I assume it will be undertaken:</p>
  
  <blockquote>
    <p>I create a React Component for the sign up page. (Simplified for demonstration)</p>
  </blockquote>
  
  <pre><code>class SignupForm extends Component {
      constructor(props){
          super(props);
          this.onSubmit = this.onSubmit.bind(this);
      }
      onSubmit(val){
          debugger;
      }
      render(){
          return (
              &lt;form onSUbmit={ (e)=&gt; this.onSubmit(e) }&gt;
                  &lt;input type="text" /&gt;
                  &lt;label&gt;&lt;/label&gt;
                  &lt;button type="submit"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          )
      }
  }
  </code></pre>
  
  <blockquote>
    <p>When button is clicked the OnSubmit() function triggers, where it will be passed JSON data.</p>
  </blockquote>
  
  <pre><code>{
     "name": "Kanye",
     "surname": "West",
     "email":"yeezy@goodmusic.com",
     "password":"notsurehowthiswillwork"
  }
  </code></pre>
  
  <blockquote>
    <p>Where I can trigger my action <code>SignupAction()</code> which will make an AJAX call to my API and then update my reducers.</p>
  </blockquote>
  
  <p>The confusion multiplies when it comes to using libraries like <a href="https://github.com/davidkpiano/react-redux-form" rel="noreferrer">react-redux-form</a> or <a href="https://github.com/erikras/redux-form" rel="noreferrer">redux-form</a>. I just want to simply have a model or something for <code>name</code>, <code>surname</code> <code>email</code> and <code>password</code>, but I feel that these libraries are over-engineered as soon as they start having their own reducer like: </p>
  
  <pre><code>const store = createStore(combineForms({
     user: initialUser,
  }));
  </code></pre>
  
  <blockquote>
    <p><strong>MY OTHER OPTION IS:</strong></p>
  </blockquote>
  
  <pre><code>class SignupForm extends Component {
  
      constructor(props){
          super(props);
          this.state.form = {
              name : '',
              surname: '',
              email: '',
              password: ''
          }
      }
      onSubmit(e){
          e.preventDefault();
          this.props.SignupAction(this.state.form);
          // then reset the state agian to '' 
      }
  }
  </code></pre>
  
  <p><strong>But</strong>, my question is... will this effect performance and if so WHY?</p>