How to design complex multi component form in react redux

Question

I have form. This form has lot of input elements. User interaction with form: User first selects a product from multiselect (can select up to 32 products). Based on the selected product we show other form elements, which user has to fill. Input fields for a particular product can be categorized in mainly 3 categories.

Company related fields: (Company selection component) who is the buyer? etc.
Other fields: (Radio buttons, checkboxes, text, date etc..) Does buyer has sufficient money to buy? Etc.
Special other fields: These are same as other fields but their answer can add more products in the form, which in-term will add more input fields. E.g. if answer of Does buyer has sufficient money to buy is NO. Then you might ask another question such as, if buyer doesn’t have money then do you think we should include product 2 as well which is for raising money for buyer to buy this commodity.

After that user fills some common fields, these are not related to a particular product. As per the mocks given, entire form is divided in multiple accordions. See attached screenshots. Notes:

Model to support this form looks like this: (One model for entire form)

Form : { Buyers: [ { Name : "Abc", Id : 1234 }, ], Sellers: [ { Name : "Abc", Id : 1234 }, ], Money: "", Question1: "", Question2 : "", }

Common company related questions should be grouped together. E.g. say product 1 has a question called “Who is the buyer” and product 2 also has a question called “Who is the buyer”, then if user selects both the products, question with name Who is the buyer should not be shown more than once.
Form needs to be validated for validations such as “required”, “min-length” and any other custom validation.
Data model json (point # 1) will be saved when user clicks the submit button on the bottom of the page.

My Questions:

Scalable: How to architect the form so that adding/updating more form sections is not a pain later. This also needs to take care of the custom event handling for form elements. (Adding another product based on the answer of a question is an example of that)
Performance: How to design this form so that it loads fast, even if user adds 5+ products.
Maintainable: Another most important aspect is readability; it shouldn’t become one giant blob of elements which a new developer in the team is scared of touching.

High level design/architecture will be really helpful.

Tech stack I am thinking of using: React and Redux

Have you tried to do this yourself yet? If you are going to use react and redux then consider redux form, redux-form.com/6.7.0. — Chris Cousins
– Chris Cousins, Commented Jun 8, 2017 at 5:04

Piyush Dhamecha · Accepted Answer · 2017-06-08 07:50:35Z

You can use React + Redux + Webpack

Videos : Click here to watch React + Redux + Webpack videos

You have to create Model (data) and Component visibility flag (componentToLoad) inside store like:

store={
    data:{
        Buyer:'xxx',
        Seller:'xxx',
        etc,
    },
    componentToLoad:{
        LoadBuyerComponent:true,
        LoadSellerComponent:false,
        etc,
    }
}

Create different component for Buyers,Sellers,etc

class Buyer extends Component {
    render() {
        return (
          //HTML Code
          <div>        
          </div>
     )
}

class Seller extends Component {
    render() {
        return (
          //HTML Code
          <div>        
          </div>
     )
}

You can load component dynamically based on store

class MainForm extends Component {
    render() {
        var components = [];
        if(this.props.componentToLoad.LoadBuyerComponent == true)
            components.push(<Buyer/>)
        if(this.props.componentToLoad.LoadSellerComponent == true)
            components.push(<Seller/>)
        return (
          <div>      
              {components}  
          </div>
     )
}

Collectives™ on Stack Overflow

How to design complex multi component form in react redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related