Form fields not known when reducer is created

[udalrich]

I have a page which does something along these lines.

1. Create the redux store
2. Display the initial page
3. Get some input from the user
4. Get data from a web server
5. Display a form based on that data

If the returned data is {a: 1, b: 2, c: 3}, I will create a form with three fields, labeled a, b and c. These values are stored in the model at foo.bar.a, foo.bar.b, ... If the returned data is {a: 1, b: 2, d: 4, e: 8}, then I create a form with four fields (a,b,d,e). This worked fine when I was using a React Form, since I could set up a default value for each field. react-reduce-form does not, as far as I can tell, support default values, but requires that the value be in the model.

Since I initialize the store before I know what the fields will be, I cannot set them in the initial state. There is not even a finite set of possible values, so I cannot preset all possible values.

My render method currently looks something like

if (state.fieldsForFrom) {
  return <MyForm fields={state.fieldsForForm} />
} else {
  return <span />;
}

Do I instead need to do something like

if (state.fieldsForFrom) {
  if (state.myForm.values) {
    return <MyForm fields={state.fieldsForForm} />
  } else {
    // Update the state with the default field values, now that we know what the fields are
    // (Also, the dispatch needs to be done in a promise/future/async wrapper, since the store
    // cannot be modified while a render is in progress
    store.dispatch(createInitValuesAction(state.fieldsForForm));
    return <span />;
  }
} else {
  return <span />;
}

[davidkpiano]

Have you tried using the defaultValue prop in the controls?

[udalrich]

No. I did not find that mentioned in https://davidkpiano.github.io/react-redux-form/docs/api/Control.html or similar pages. Where is it documented?

[davidkpiano]

I'm still trying to understand what exactly you're trying to accomplish. Do you want to asynchronously set initial values for each field? If so, use actions.load(model, value):

somePromise().then((values) => {
  // This will set the initial state of foo.bar to the values
  dispatch(actions.load('foo.bar', values));
});

[udalrich]

This shows what I am trying to do. When you click the Add Fields button, it updates state.data.fields to have additional members. The form then gets a new dropdown for each member. Clicking Show State does a console.log of the current state to see what is happening.

Adding defaultValue to the <Control.select> sets the value correctly. Removing it sets the value to 1. I am not able to get the same error here that I saw in my original code base.

At this point, I know how to do what I want to do, but I think that the documentation does not mention defaultValue.