Behavioral Design Patterns in My React Project

I'm happy to share that I've recently improved my React project by implementing three Behavioral Design Patterns, including Strategy, Iterator, and Observer.

My Experience with the Strategy Pattern

The first time I dealt with a Behavioral Pattern was when I faced a challenge related to calculating product prices in an ERP system. There were many variables affecting the final price, such as:

• Commission (in % or $)
• Surcharge (in % or $)
• Discount (in % or $)
• Product-specific discount (in % or $)
• Surcharge/discount table by customer type (in % or $)
• Surcharge/discount table by product type (in % or $)
• User type commission (in % or $)

Additionally, the order of applying these variables varied from user to user. For example:

• User X: Commission > Surcharge > Discount
• User Y: Surcharge > Discount > Commission
• User Z: Discount > Surcharge > Commission

Over the years, these possibilities made the code extremely complex, and the product price calculation became highly sensitive to changes, leading to numerous errors after even minor modifications. This complexity prevented us from fixing chronic issues like rounding errors, commission value errors, and discount value errors, forcing us to make manual database adjustments periodically.

Solution

To address this problem, we applied the Strategy Design Pattern, which was initially challenging. It required numerous changes, extensive code studies, and exhaustive testing until we found the ideal structure of classes, interfaces, and methods that finally solved the problem. It was one of the biggest challenges of my career, and since then, I've come to greatly appreciate design patterns.

Iterator and Observer Patterns

I've also implemented the Iterator and Observer patterns in this project. The Iterator pattern provides a way to access elements of a collection sequentially without exposing its underlying representation. Meanwhile, the Observer pattern allows objects to be notified of changes in another object, promoting a loose coupling between components.

Feel free to check out the project on GitHub and let me know your thoughts! https://github.com/samuelgomeslima/design-patterns/tree/main

#React #DesignPatterns #SoftwareDevelopment #StrategyPattern #IteratorPattern #ObserverPattern