Infinite REGISTER_FIELD/UNREGISTER_FIELD loop

[elmeister]

First of all - thanks for the great component to keep form state in a Redux store!
It helps us a lot to manage customisable forms.

The problem we have with 6.2.0 is that infinite REGISTER_FIELD/UNREGISTER_FIELD loop appears when we try to get form field values. Initial values is an object, containing array { dataLocators: [] }. Here is the code we use to get current values:

@reduxForm({
  form: 'layout-generator-settings',
  validate
})
@connect(
  state => ({
    values: selector(state, 'dataLocators')
  })
)

That's it, now everything redux-form does on form load - registering and unregistering all values in array

Will appreciate your help a lot.

[niksajanjic]

I can't say I know what is happening, but I usually have connect decorator before reduxForm decorator. With this arrangement your reduxForm decorator will pass down values which will be object of all values in a form, here:

http://redux-form.com/6.2.0/docs/api/ReduxForm.md/#instance-api

Now, after that you are overriding those values by defining values through connect so my guess is that is doing something weird for you. Try changing values name in connect to let's say stateValues and maybe you should also revert decorators so that connect is happening before reduxForm. Hope that helps.

[elmeister]

@niksajanjic, thanks a lot for your efforts and help!
Both - decorators order and values name was taken from Selecting Form Values sample.
I've tried to revert connect and reduxForm decorators and to rename values to stateValues, but unfortunately situation is the same.
Actually passed initial values are reachable - values: selector(state, 'dataLocators') returns correct values from state.form[formId].values.dataLocators.
The only problem is the infinite loop of REGISTER_FIELD/UNREGISTER_FIELD actions.

After 3 UNREGISTER_FIELD state looks like this:

Then, after 3 REGISTER_FIELD, state contains 5 registered fields:

When all 5 fields registered, redux-form continue to unregister last 3 of them, then register them again and so on.

Same situation with loop appears without selector usage, with connect before reduxForm.

@connect(
  state => ({
    values: state.form[formId] ? state.form[formId].values.dataLocators : []
  })
)
@reduxForm({
  form: formId,
  validate
})

Without connect (when @connect block is removed) everything is fine with loop, but current selected values aren't available.

[elmeister]

Well, the problem is mentioned in Selecting Form Values Example, here it is: WARNING: Use this method sparingly, as it will cause your entire form to re-render every time one of the values you are selecting changes.
Re-render triggered Field component unmount and for each unmount all fields was unregistered, then component was mounted, so all fields was registered again, props change triggered component remount and so on.
Switch to stateless functions and pass values directly fixed the problem, thanks for help!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.