Best way to create container components with lot of similar code

(Vivek Vaibhaw Dwivedi) #1

After developing a decent sized application, I noticed that there is a lot of common code between my containers for CRUD operations. In my particular case, I have a BI tool where we can create charts and reports along with other stuff. I tried two approaches:

  1. For Charts creation and update, I created a single container which handled both create and update part of the charts based on URL. This led to a lot of situations where I have conditionals for create and update mode.

  2. However in my reports, I created separate containers for Create, View and Edit. This led to a lot of duplicate code for handling interactions. If I merge these three into one, there will be a lot more code and a lot more conditionals as well.

I am not sure how to handle situations like this where merging code in one will result in a huge file and keeping it separate will make lot of duplication as well. Should I create a container with common code and extend it instead of React.Component? Is there any tutorial or explanation someone can point me to?