Search code examples
reactjsfluxreduxredux-form

Binding forms at multiple different mount points with redux-form

As I understand from the react-form documentation, you normally put a form reducer at the root of your reducer tree, and redux-form will put each form's state inside this form key, based on the form's name.

However this will result in a strange structure, whereby the form data for a certain tree is under the form key, and not with the other state data related to it. In this example, the app stores a list of possible account types from the server, which logically should be grouped with the signup form itself. However with redux-form they'll be in completely different subtrees:

            signup          
           /
       forms
      /    \
     /      login
    /
 root
     \      login--signinMethods
      \    /
       header
           \
            signup--accountTypes

I'd much rather a more organised tree like this:

             form          
            /
       signup
      /     \
     /       accountTypes
    /
 root
     \      signinMethods
      \    /
       login
           \
            form

Is this possible with redux-form, or any other redux library?

Solution

  • Try using the reduxMountPoint option:

    The use of this property is highly discouraged, but if you absolutely need to mount your redux-form reducer at somewhere other than form in your Redux state, you will need to specify the key you mounted it under with this property. Defaults to 'form'.