Best way to submit FORM data with React Redux?

Question

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 this question and these and bunch of others but I am not sure this is the best approach.

This is how I assume it will be undertaken:

I create a React Component for the sign up page. (Simplified for demonstration)

class SignupForm extends Component {
    constructor(props){
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onSubmit(val){
        debugger;
    }
    render(){
        return (
            <form onSUbmit={ (e)=> this.onSubmit(e) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

When button is clicked the OnSubmit() function triggers, where it will be passed JSON data.

{
   "name": "Kanye",
   "surname": "West",
   "email":"yeezy@goodmusic.com",
   "password":"notsurehowthiswillwork"
}

Where I can trigger my action SignupAction() which will make an AJAX call to my API and then update my reducers.

The confusion multiplies when it comes to using libraries like react-redux-form or redux-form. I just want to simply have a model or something for name, surname email and password, but I feel that these libraries are over-engineered as soon as they start having their own reducer like:

const store = createStore(combineForms({
   user: initialUser,
}));

MY OTHER OPTION IS:

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 '' 
    }
}

But, my question is... will this effect performance and if so WHY?

Answer 1

I would suggest using redux-form. It gives you following options:

1. Input validation
2. Different types on inputs including date and file uploads
3. Provides a onSubmit method which is called after your validation succeeds (this is point where you dispatch action to call your API and update state)

But if still dont want to use (I would strongly recommend using it), what you can do is on form submit just validate your data and dispatch an action in your container. So pass your data as parameters from your component to your container where you dispatch an action calls post/put API (in redux form you dont need to pass anything, you can directly read from the store).

    onSubmit(val){
        debugger;
    }
    render(){
        const { onSubmit } = this.props //pass onSubmit from 
        return (
            <form onSubmit={ (e)=> {onSubmit} ) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

Container:

mapDispatchToProps(dispatch){
   return {
    onSubmit => {
     //dispatch action
     }
  }

Answer 2

Very easy way to deal with forms:

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;