Inline editing of a field using react, redux and redux-form. Should I do it this way?

Rather than opening a form for an entire editable object, I would like to create inline editing of individual fields from the object.

I'm using reactjs, redux and redux-form for my other forms so I thought the best place to start would be trying to use redux-form for the inline editing as well. This would save me from having two different ways to do validation, state management, etc.

But this would mean I would have a form for every editable object plus a form for every field on those objects. It could be hundreds of forms. Aside from the maintainability issues that would come with this approach, I'm wondering what the performance implications would be. How would redux-form behave in that case? Does it mean there would be hundreds of reducers listening to every action in the redux store or are these reducers only listening while the page containing the form is displayed?

Solution

update

I think it should be quite possible to create a redux-form for inline fields on edit and remove when editing stops.

Here is a working example (open dev tools to see the actions running) https://codesandbox.io/s/13nywm3k2j

It obviously needs some data persisting mechanism after form is sumbitted

The form data not necessarily should be 'flat', it can be nested with help of dot notation, like

<Form>
  <Field name='title' />
  <Field name='object.title' />
  <Field name='object.mass' />
  <Field name='object.weight' />
</Form>