React, Redux for complex nested forms

[tounano]

Hey guys,

I'm developing an app with pretty complex form logic. I'm trying to follow the advice of @gaearon about Smart and Dumb components.

My form is dynamic, and is constructed out of several fieldsets. The fieldsets that are being displayed are chosen based on user roles.

Each fieldset has it's own validation logic and own actions to retrieve async data based on user input, in order to guide the user towards completion of the form.

Not only that, but the inputs inside each fieldset are dynamic as well. Again, based on user permissions.

I've tried to implement this use case using only one Smart Component (the route handler), however without much success.

As I see it, in such use case, a fieldset is both a smart component and a dumb component. It both connects to redux, in order to dispatch some private use case actions and it also acts as a dumb component to bubble up state changes using events.

Am I getting it right?

In your opinion, where does validation should take place? Inside each fieldset or in the route handler?

Basically, I'm planning to use same validation logic both on client and server.

The model that I'm validating on the server, looks something like:

var state = {
  roles: ['roleOne', 'roleTwo'],
  schema: {
    // object describing the validation required
  },
  // The model from the client side
  model: {
    fieldSetName: {
      fieldName: "FIELD VALUE"
    }
  }
}

// Now I'm validating it
var result = compose(
  validateSchema,
  checkPermissions
)(state)

// The response is same object with errors pro
result = {
  // Same object
  //...
  errors: {
    fieldSetName: {
      fieldName: {
        $errors: [
          "You don't have permissions to modify `fieldName`"
        ]
      }
    }
  }
}

The original way I tried to implement it, is to is to simply validate in the route handler level, but it got really messy and complex. Basically unmaintainable. Some validation logic needs to be async.

On the server I prefetch all the validation logic before validating.

On the client, it's a bit harder because the fieldsets are dynamic.

What do you think? How would you approach nested forms with react-redux?

Thanks.

[gaearon]

Check out redux-form for a sane validation approach.
If your business logic is complex, indeed, nesting smart components is the way to go.

I'm closing because it's not an actionable issue—this type of question is better asked on StackOverflow.

[ghost]

A complex form usually entails multiple controls of several types and is likely to require interaction with a number of different domain models and perhaps client-side caching of unsaved changes. As Redux users will see, creating even medium-complexity forms there are performance issues handling input onChange. Rather than going Immutable for better performance, or adding complexity with redux-form, I had good luck simply creating a UI form reducer and implementing the workaround as suggested by @trashgenerator against redux-form.

Aside: Because React throws a validateDOMNesting exception when nesting forms (a likely case when composing forms of reusable other forms) I'm interested in knowing if anyone has successfully used the form attribute of the HTML5 Input as a formOwner prop to workaround the form nesting limitation, and enable robust serialization of complex forms without sacrificing composability or introducing additional app dependencies.