I found the Redux Form package. It does a really good job!

So, you can use Redux with React-Redux.

First you have to create a form component (obviously):

import React from 'react';

import { reduxForm } from 'redux-form';

import validateContact from '../utils/validateContact';



class ContactForm extends React.Component {

  render() {

    const { fields: {name, address, phone}, handleSubmit } = this.props;

    return (

      <form onSubmit={handleSubmit}>

        <label>Name</label>

        <input type=text {...name}/>

        {name.error && name.touched && <div>{name.error}</div>}



        <label>Address</label>

        <input type=text {...address} />

        {address.error && address.touched && <div>{address.error}</div>}



        <label>Phone</label>

        <input type=text {...phone}/>

        {phone.error && phone.touched && <div>{phone.error}</div>}



        <button onClick={handleSubmit}>Submit</button>

      </form>

    );

  }

}



ContactForm = reduxForm({

  form: 'contact',                      // the name of your form and the key to

                                        // where your form's state will be mounted

  fields: ['name', 'address', 'phone'], // a list of all your fields in your form

  validate: validateContact             // a synchronous validation function

})(ContactForm);



export default ContactForm;

After this, you connect the component which handles the form:

import React from 'react';

import { connect } from 'react-redux';

import { initialize } from 'redux-form';

import ContactForm from './ContactForm.react';



class App extends React.Component {



  handleSubmit(data) {

    console.log('Submission received!', data);

    this.props.dispatch(initialize('contact', {})); // clear form

  }



  render() {

    return (

      <div id=app>

        <h1>App</h1>

        <ContactForm onSubmit={this.handleSubmit.bind(this)}/>

      </div>

    );

  }



}



export default connect()(App);

And add the redux-form reducer in your combined reducers:

import { combineReducers } from 'redux';

import { appReducer } from './app-reducers';

import { reducer as formReducer } from 'redux-form';



let reducers = combineReducers({

  appReducer, form: formReducer // this is the form reducer

});



export default reducers;

And the validator module looks like this:

export default function validateContact(data, props) {

  const errors = {};

  if(!data.name) {

    errors.name = 'Required';

  }

  if(data.address && data.address.length > 50) {

    errors.address = 'Must be fewer than 50 characters';

  }

  if(!data.phone) {

    errors.phone = 'Required';

  } else if(!/d{3}-d{3}-d{4}/.test(data.phone)) {

    errors.phone = 'Phone must match the form 999-999-9999'

  }

  return errors;

}

After the form is completed, when you want to fill all the fields with some values, you can use the initialize function:

componentWillMount() {

  this.props.dispatch(initialize('contact', {

    name: 'test'

  }, ['name', 'address', 'phone']));

}

Another way to populate the forms is to set the initialValues.

ContactForm = reduxForm({

  form: 'contact',                      // the name of your form and the key to

  fields: ['name', 'address', 'phone'], // a list of all your fields in your form

  validate: validateContact             // a synchronous validation function

}, state => ({

  initialValues: {

    name: state.user.name,

    address: state.user.address,

    phone: state.user.phone,

  },

}))(ContactForm);

If you got any other way to handle this, just leave a message! Thank you.