Best way to keep track of disabled fields on redux-form

Question

First post here, please be patient.

I have searched for this question but couldn't figure it out.

Please consider a form containing 3 text fields: A, B and C. When A is filled, an async server fetch is fired and the result could define the values of B, or C, or both. If A is changed by the user, the old values of B e C must be cleared and a new fetch is fired. So far so good. I'm dispatching a change action when necessary to fill (or clear) B and C.

But, there is a rule. When a field is filled by the server fetch, it must be disabled, so the value can't be changed directly by the user. If not, it must remain enabled, so the user can fill it.

What do you think is the best way to keep track of fields that must be disabled?

As far as I've searched, redux-form do not do this directly.

Should I keep this info on a separated structure on redux state? Should I extend redux-form state using a reducer plugin? Either way, should I dispatch a new type of action to disable each field?

Other option is to use "autofill" instead of "change", and disable fields marked as auto filled.

Am I missing a really simple solution?

Thanks

Answer 1

I'm not sure if there's a "simple" solution to this. Personally, I would create a React state that keep track of the state of B and C, perhaps something like

{
  BGenerated: true,
  CGenerated: true
}

and when you render your Field input, add props disabled={this.state.BGenerated}