React-redux-form: How to async load initial state?

[max-mykhailenko]

Documentation for state loading is unclear. How I should format data object when my form is deep or not deep?

Also I tried to understand how to createStore with reducers for business logic

[davidkpiano]

Ah sorry, you found a typo in the docs! That should be:

import { connect } from 'react-redux';
import { actions } from 'react-redux-form';

// external user data to load
const data = { /* ... */ };

const InitializeFromStateForm = (props) => {
  const { dispatch } = this.props;

  return (
    <form>
      <button type="button" onClick={() => dispatch(actions.load('user', data))}>
        Load Account
      </button>
      {/* ... */}
    </form>
  );
}

export default connect(null)(InitializeFromStateForm);

where actions.load is called with two arguments: the model and the data that represents the value of that model.

For instance, your data shape can look like this:

const userData = {
  firstName: 'David',
  lastName: 'Khourshid',
  email: '...',
};

// somewhere dispatchable
dispatch(actions.load('user', userData));

// loading somewhere deeper
dispatch(actions.load('foo.bar.deep.user', userData));

Does this help?

[max-mykhailenko]

Thanks! Now my form works correct. Only one thing now is looking not perfect: I should add deep. to every model attribute in every control.
Now it looks:

model={`forms.product.name.${langKey}`}

Can you describe a reducer data structure? Why we need forms.forms.$form object?

[davidkpiano]

Yes, I'll add it to the docs - writing them up now!

Basically, any field is directly accessible:

forms.product.groupID; // gives you the field for product.groupID

This is for the common case of when you need to see the field value of an individual field. Any primitive type is considered a field, such as a JS string, number, or boolean. This closely represents the possible values that a user can enter into a single form control (you can't really type out an object or an array, haha).

For more complex values, i.e., arrays and objects, the $form property is added to represent _all_ of the fields. It's named $form to prevent naming conflicts with any other field names.

So if you wanted to know the form validity state of the entire product form, you would access it via:

forms.product.$form.valid;

Does this make sense?

[max-mykhailenko]

Yes, I got it, thanks!. One more question — deep.forms.$form represent state (validation, pristine) of all forms in store? And deep.forms.product.$form represent state of product form only. It's right?

[davidkpiano]

Yep, that's exactly right! This also means that you can have nested forms.

[max-mykhailenko]

Unfortunately my english doesn't allow me to improve docs in PR. Thanks for clarification!
PS. Your API is better than in redux-form ;D