want to load initial Values in Redux Form

Question

i am trying to load the initial value in from but couldn't do this, i am using redux-from, i set the profile data in redux store and can access the data through the props(console them) but can't able to show in the form input. i am trying to replicate this redux-from example. but couldn' able to continue it.

below is the code.

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

import { required, email, maxLength25 } from '../utils/validations';
import { renderField,
    renderSelectField,
    renderRadioField,
    renderTextAreaField,
    renderCheckboxField
} from '../utils/textFieldGroup';
import countries from '../utils/countryList';
import { profileUpdate, profile } from '../actions/user';

const validateAndUpdateRecords = (values, dispatch) => {
    return dispatch(profileUpdate(values))
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    })
}

class ProfileForm extends React.Component {
    componentWillMount(dispatch){
        console.log('mount');
        this.props.fetchProfile();
    }

    render(){
        const { handleSubmit, submitSucceeded, error, profile } = this.props
        console.log('prof',profile);

        return (
            <div>
                <h1>Profile Page</h1>
                <form onSubmit={handleSubmit(validateAndUpdateRecords)}>
                    <div className={typeof error!='undefined'?'show alert alert-danger': 'hidden'}>
                     <strong>Error!</strong> {error}
                    </div>
                    <Field name="fname" type="text" component={renderField} label="First Name"
                      validate={[ required, maxLength25 ]}
                    />
                    <Field name="lname" type="text" component={renderField} label="Last Name"
                      validate={[ required, maxLength25 ]}
                    />
                    <Field component={renderRadioField} name="gender" label="Gender" options={[
                        { title: 'Male', value: 'male' },
                        { title: 'Female', value: 'female' }
                    ]} validate={ required } />
                    <Field name="country" type="text" data={countries} component={renderSelectField} label="Country"
                      validate={[ required ]}
                    />
                    <Field name="about_us" type="text" component={renderTextAreaField} label="About Us"
                      validate={[ required ]}
                    />
                    <Field name="newsletter" type="checkbox" component={renderCheckboxField} label="Newsletter"
                      validate={[ required ]}
                    />
                    <p>
                      <button type="submit" disabled={submitSucceeded} className="btn btn-primary btn-lg">Submit</button>
                    </p>
                </form>
            </div>
        )
    }
}

ProfileForm = reduxForm({
    form:'profile'
})(ProfileForm)

ProfileForm = connect(
  state => ({
    initialValues: state.user.profile 
  })              
)(ProfileForm)

export default ProfileForm;

//text field

export const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div className={classnames('form-group', { 'has-error':touched && error })}>
      <label className="control-label">{label}</label>
      <div>
        <input {...input} placeholder={label} type={type} className="form-control"/>
        {touched && ((error && <span className="help-block">{error}</span>))}
      </div>
    </div>
)

Thanks in advance

Answer 1

Finally i figure out the solutions. below is the solutions. We need to add enableReinitialize : true as mentioned below. If our initialValues prop gets updated, form will update too.

ProfileForm = reduxForm({
    form:'profile',
    enableReinitialize : true
})(ProfileForm)