Redux Form: initialValues does not set form values

Question

I just want to set and render the initialValues of a form in redux-form. The data is in redux and I believe I'm mapping it right...but the form is not populated. The form works just fine for an insert, but now I'm wiring it up for an update.

Redux Form 7.2.0

Form:

...
<div className="form-group">
    <div className="col-md-2 control-label">Name</div>
    <div className="col-md-10">
        <Field 
            label="Name"
            name="app_cat_name" 
            component={input}
            validate={required} />
    </div>
</div>
<div className="form-group">
    <div className="col-md-2 control-label">Description</div>
    <div className="col-md-10">
        <Field 
            label="Description"
            name="app_cat_descr" 
            component={textArea}
            validate={required} />
    </div>
</div>
...

mapStateToProps:

const mapStateToProps = state => {
    let values = { 
        initialValues: state.category
    };
    return values;
}

...at this point while debugging, "values" has the correct object and mapStateToProps is working.

Wired up:

export default reduxForm({
    form: "CategoryForm",
    enableReinitialize: true
})(connect(mapStateToProps, { saveCategory, getCategories, getCategoriesCount })(CategoryForm));

...with or without "enableReinitialize" the result is the same.

I even tried passing it into the form like so, but the same result - form fields are blank:

<form onSubmit={handleSubmit(this.onSubmit)} initialValues={initialValues}>

Answer 1

I believe your problem is the order in which you are calling reduxForm vs connect. In your current code, your connected component is being wrapped by redux-form, meaning at runtime the React tree will look like

<ReduxForm>
    <ConnectedComponent>
        <CategoryForm />
    </ConnectedComponent>
</ReduxForm>

And because of this, the initial values that you are pulling out of state aren't actually being passed into the connected form.

Try changing your "Wired up" code to

export default connect(
    mapStateToProps,
    { saveCategory, getCategories, getCategoriesCount }
)(reduxForm({ form: "CategoryForm", enableReinitialize: true })(CategoryForm));