initialize() action creator should update initialValues props

[ericbiewener]

It appears that the initialValues prop that is provided to the form only comes from whatever initialValues prop you pass into the form, as opposed to staying in sync with the initial property of the form in the redux state tree. Therefore, using the initialize() action creator and keeping the initialValues prop in sync requires grabbing the initial property from redux in mapStateToProps and passing that in to your form component. Perhaps there is no way around this 2-step process, but I expected the use of initialize() to accomplish this for me (and therefore expected the initial property in redux to always be the same as the initialValues prop available to form components).

[gustavohenke]

Perhaps there is no way around this 2-step process

Yes.
That's how React works; there's no such thing as automatic 2-way data binding, just like would have in AngularJS/Angular.

[ericbiewener]

I wasn't suggesting that this be "automatic" via 2-way data binding. Redux form components get a bunch of props passed into them. I thought it might be possible to recompute the initialValues prop from the inital property in the state tree and pass it in somehow, e.g. here (no idea if passing it in there would accomplish this, just offering it as an example).

[ms88privat]

I'm running into lot's of issues with initialValues lately. I think the correct way would have been to not have that property at all or only this property instead of having it in the store.

[timhwang21]

I am conflicted about this. On one hand, it's a little strange to me if initialValues from the parent or connect is no longer "respected" in the child if initialize() is called.

On the other, after doing some investigation, maybe this is the correct behavior, as I've found a bug associated with validation logic when initialize is called. (@gustavohenke this may be suitable for a separate issue ticket, please let me know if you'd like me to file!)

In createReduxForm.js#L905, we have logic to use the initial values (for validation, etc.) if the flag shouldResetValues is true. This flag is true if:

1. we are not on the initial render
2. enableReinitialize is true, keepDirtyOnReinitialize is false
3. The "current" initial values the form was last initialized with differ from props.initialValues.

The last condition is the important one; if we pass an initialValue in our configuration, and then call initialize() with anything else, the third check will ALWAYS be true. This means that if cases 1 and 2 are true as well, the initial values will always be used for various checks because of L905, instead of the current values.

Notably, this means that the values prop passed to the form will differ from what is in the Redux state, which led to a debugging nightmare, where values in the store were correct, but values passed to the form were incorrect.

The workaround I'm trying right now is to not pass props.initialValue at all, and manually handle initialization in componentWillReceiveProps. However, it is very manual, and feels very bug-prone. EDIT: This approach doesn't work, because props.initialValue will be undefined, which fails the deep equal check against any re-initialized initial value.

If this is not the way initialize() is meant to be used, or if it's not meant to be used together with initialValues, maybe we can update the docs to reflect that?

@erikras would also appreciate a look at this.

[jedwards1211]

@timhwang21 I doubt people very often do both things (pass an initialValues prop to their form and dispatch an initialize action later) and it sounds like you're saying they don't work together anyway?

So I think at the very least, if reduxForm didn't receive an initialValues prop, it could pass the initial values from state to the wrapped component instead.

Maybe it should even warn or error if the initialize action is dispatched on a reduxForm that was given an initialValues prop.