React-redux-form: Example of late initializing, resetting and nested arrays

[SoonDead]

The Problem

Reading the Docs the first time is hard. For example the quickstart guide mentions the concepts of modelReducers and formReducers without any references on what they are, how they are useful or why they are separate things. A lot of references are broken and I find it pretty hard to gather the information needed, so please bear with me if I ask something seemingly trivial.

I want to create a form where the model has the following structure:

{
  groups: [
    {
      groupId: 123
      groupName: 'personal parameters',
      items: [
        {
          id: 12,
          displayName: 'First Name',
          type: 'text',
          value: 'John'
        },
        {
          id: 13,
          displayName: 'Weight',
          type: 'number',
          value: 100,
          unit: 'kg'
        }
      ]
    }  
  ]
}

The requirements for this form:

• It's only a part of the app, there are a lot of unrelated reducers. (...createForms({ personForm }) I guess)
• When navigating here, the form should be populated from a server response. This is only queried on navigating here and the data is not available when the store is initialized. (The server response is dispatched in a redux-thunk, but I'm not sure about what action.type and action.payload I need to set for this)
• There is a reset+refresh button on the form that discard all the current changes and request a new initial state from the server. (Same as above, but discarding all previous changes).
• The form contains a list of lists (groups of items).
• Groups can be added, removed and ordered. Items can be added removed and ordered too. (Something along the lines of track() but with a depth of 2. What actions to dispatch to manipulate order and adding/deleting new groups?).
• In each item, the value must be a number if the type is 'number' and a string if the type is 'string'. (How can I reference an other property in a validator? Keep in mind that we are deep in arrays)
• The unit property of an item is only selectable (the <select> dom element is only visible and the property should be only sent to the server on submit) if the type is 'number'. (Showing and hiding form elements depending on form state. How do I access the form state?)

I'm not requiring a full blown example on this (although I'm pretty sure it would be useful for others), but at least pointers on how to solve each requirement.

Also I'm really interested in how to properly compose this (How can I split and compose the reducers or the components? Should I create a GroupItemEditor component or better to just use a map directly in the main component?)

I would really appreciate even partial help on this.

[aguo99]

It will be appreciated if anyone can provide or point out the following examples:

1. initialize the form model data from async server response.
2. populate list data from nested arrays under model.
   Thanks.