Cannot initialize redux-form with values comming from Axios

Question

I'm using the version 6.7.0 of the redux-form and i don't get the way for getting my form initialized once Axios perform successfullly the http get request by the "fetchPerson" redux action. I'm setting already the "enableReinitialize : true," when i export the ReduxForm but it is still not rendering the results. (Btw, the validation function is not being called either)

Here it the entire code for my reducer :

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { fetchPerson, editPerson } from '../actions';
import { connect } from 'react-redux';
import { Link} from 'react-router-dom';
import 'react-table/react-table.css';


class EditPerson extends Component {
  componentDidMount() {

    const { id } = this.props.match.params;
    this.props.fetchPerson(id);

  }

  renderField(field) {
    const { meta: { touched, error } } = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;

    return (

      <div className={className}>
        <label>{field.label}</label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div>
    );
  }

  onSubmit(values) {
    const { id } = this.props.match.params;
    this.props.editPerson(id,values, () => {
      this.props.history.push('/personas');
    });
  }

  render() {
     const { handleSubmit } = this.props;
     const { person } = this.props;
     if (!person) {
        return <div>Loading...</div>;
     }
     console.log("this.props");
     console.log(this.props);
     return (
            <div className="row">
                <div className="col-lg-12">
                    <div className="row wrapper border-bottom white-bg page-heading">
                        <div className="col-lg-10">
                            <h2>Editar Persona {person.name}</h2>
                            <ol className="breadcrumb">
                                <li>
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="personas/">Personas</a>
                                </li>
                                <li className="active">
                                    <strong>Editar Persona :{person.name}</strong>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div className="wrapper wrapper-content animated fadeInRight">

                    <div className="row">
                        <div className="col-lg-6">
                            <div className="row">
                                <div className="col-lg-12">
                                    <div className="well" style={{background: 'white'}}>
                                    <h3>Datos</h3>

                                      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                                        <Field
                                          label="Nombre"
                                          name="name"
                                          component={this.renderField}
                                        />
                                        <Field
                                          label="Email"
                                          name="email"
                                          component={this.renderField}
                                        />
                                        <Field
                                          label="Telefono"
                                          name="tel"
                                          component={this.renderField}
                                        />
                                        <button type="submit" className="btn btn-primary">Submit</button>
                                        <Link to="/personas" className="btn btn-danger">Cancel</Link>
                                      </form>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        )
    }

}

function validate(values) {
  // console.log(values) -> { title: 'asdf', categories: 'asdf', content: 'asdf' }
  const errors = {};

  // Validate the inputs from 'values'
  if (!values.name) {
    errors.title = "Enter a name";
  }
  if (!values.email) {
    errors.categories = 'Enter some email';
  }
  if (!values.tel) {
    errors.content = 'Enter some content telefono';
  }

  return errors;
}

function mapStateToProps(state) {
    console.log("state mapStateToProps");
    console.log(state);
    return {
      person: state.personas.person,
      initialValues:state.personas.person,
    }
};


export default reduxForm({

  enableReinitialize : true,
  form: 'PersonEditForm'
})(
  connect(mapStateToProps,{ editPerson, fetchPerson })(EditPerson)
);

here is my browser console where the personas.person it's created in the second line:

Answer 1

The redux form docs show component being decorated with the reduxForm function and then the connection function. Try breaking it out to something like:

EditPerson = reduxForm({
...
})(EditPerson)

export default connect(mapStateToProps, { ... })(EditPerson)

Also note that the values will only be initialized once. You can simply pass in the initialValues object to the form from above if desired and dispatch the initialize action from the library to repopulate the initial values.