[V6] Any examples of Multirecord forms? Unable to bind to slice of another reducer state

[jonathanq]

I am trying to use v6 and multi-record forms (I was not able to get what I needed working in v5, so decided to try v6...).

I have a reducer that is fetching data from an API. It returns a list of records. When I render those records, I am trying to bind forms for each row of the items to edit some of the fields.

In v6 - I can connect my reduxForm and use mapStateToProps to pull in data from another reducer (eg: http://redux-form.com/6.0.0-alpha.15/examples/initializeFromState/ ). However that example the other state is a single object. I want to map one of the items in my state list to my form.

In v5 - the multi-record examples used a formKey and would bind to a slice of the data stored under form reducer at that key.

In v6 - the data is stored in another reducer, but I don't see any way to use the formKey on the component to get the object to seed initialValues.

I looked around in the docs for a v6 example of Multirecord - but didn't see one. Did I miss it? Is it still supported in v6?

[ddcech]

Are you having trouble initializing the form from the data that come back from the API call? Are you sure the data is in the Redux store before the reduxForm component registers the fields? Redux DevTools can show you the ordering of Actions.

I haven't tried doing a multirecord form, but you could try using the Action Creators exposed by reduxForm.

[jonathanq]

The real confusion I have is how to initialize the fields based on 1 item from the list.

So if my reducer/state is:

const reducers = {
   items: ItemFetcherReducer   // items = [ {...}, {...} ]
   ...
};

And my Item list is:

items = [
    { name: 'test1', description: 'test item 1', price: 12.5 },
    { name: 'test2', description: 'test item 2', price: 15.9 }
    ...
];

If I create an ItemRow component, and following along with http://redux-form.com/6.0.0-alpha.15/examples/initializeFromState/.

And lets say I output the ItemRows as:

const itemRows = this.props.itemList.map((item, index) => {
      return (<ItemRow key={item.get('id')} item={item} itemIndex={index} />);
});

And then in my ItemRow component (similar to the above link) - I need to set the InitialValues based on the indexed item in the state list. But I don't have access to the props to get the itemIndex I passed in to props. I was originally passing the full item into props to just render it read-only. So I assume if I figure out how to initialize it from the state - I won't need to pass it into props.

function mapStateToProps({ items }) {
    return {
        initialValues: items[??]
    };
}

The example link just showed getting the object out directly from state. Not accessing a slice of it. The v5 MultiRecord example had the formKey prop - but didn't really explain how to deal with linking it to an actual redux state/reducer. The example was only half complete.

It seems the InitalizeFromState is the right approach for what I need. But I can't see how to handle initializing from a slice of the state (and how to tell it which slice - ie: which index in the state list).

Hope that makes more sense...

[ddcech]

I hope this helps.
When you decorate your component with reduxForm you have access to the "initialize" action creator in your props. The code below is how I initialize my data from child components. So you can pass initialize down as a prop to any child component and initialize from there.

componentDidMount() {
    this.props.initialize(this.props.items)
}

Have you looked at the FieldArray example? Could this help with your problem?

[jonathanq]

I looked at FieldArray and tried to make it work. Unfortunately it still does not seem to play nicely with this use-case. I can't get the existing data to load into the form state. The FieldArray example seems close, but it does not handle loading existing data at all and just starts with an empty data set.

I'll have to try looking at some alternative libraries - or implement the actions myself on the input changes. The problem I am trying to solve is probably not a great fit for redux-form. I'll try it again when I have a simpler form.

Thanks for your help.

[NeXTs]

@jonathanq I have exact same task, did you found solution?

[erikras]

You can do similar things to the v5 multi record example by simply using a different form name. e.g.

//  brackets entirely optional, just needs to be unique
<WidgetForm form={`widgets[${widget.id}]`} initialValues={widget}/>

[jmfurlott]

@erikras I just ran into this issue on rc3 and your solution works perfectly. It's very poorly documented, however, and the multirecord forms example is not even included on the v6 docs.

I would be happy to convert over the v5 docs to v6 using the same (but updated example if you want)

[geminiyellow]

really poorly documented

[Noitidart]

The reprecussions of assinging form in reduxForm({...}) are not clear. I got hit hard by this for almost 2 months. https://stackoverflow.com/questions/37456526/how-to-embed-the-same-redux-form-multiple-times-on-a-page/37464048#comment77959217_37464048

Wow this was killing me for months. I always suspected this, but docs never stated so I always thought the way we are supposed to do things is put form only in the reduxForm({form:'blah'})(MyFormComponent) line. Absolutely killed me. How come this is not documented. And why even bother documenting the bad way? With a label "REQUIRED" too for the bad way! React is about reusable components, the form is reusable, but with reduxForm({form:'blah'})() method it becomes not reusable correct? So misleading - http://redux-form.com/7.0.3/docs/api/ReduxForm.md/#-code-form-string-code-required - it should note the conseuqnece of no reusabilty

[Noitidart]

I apoogize I didn't mean to be harsh. I am extremely greatful for such an absolutely excellent piece of work out there for free!

And it is just one small bit of doc. I was just frustrated haha. Very thankful now that I am getting the hang of redux form now :)

[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.