Best way to submit FORM data with React Redux?
<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>