My most recent obsession in the coding world has been design patterns. I love patterns!

In my free time I’ve started studying design patterns and algorithms, since I first honed my craft attending a web developer bootcamp as opposed to getting a proper Computer Science degree. Feeling that my knowledge was lacking, I dove in head first. I would like to take the time to share some of that exploration with you.

I wanted to give a brief explanation of what Redux is, but more importantly, discuss the design patterns it uses to make our lives as developers easier. In its simplest sense Redux is a way to organize one's data on the frontend. It has strict guidelines of how data can move or flow through a project, which is known as unidirectional data flow. Below is an image of how the data would be allowed to flow in a Redux application.

While I will not be giving an in depth explanation of this concept, I’ll instead be focusing on two key components in Redux: The State Tree and the Connect Method. I will also look into which design patterns they use.

The State Tree

The State Tree uses a pattern known as the Singleton Pattern. Its definition is:

“In software engineering, the Singleton Pattern is a design pattern that restricts the instantiation of a class to one object.”

While this is one of the easier patterns to understand in computer science, I believe it can still be hard to visualize in a real life application. What this means when we compare it to Redux is that there can only be ONE state tree.

The reason for only using one tree is ensuring there is only one place to look for the different states or changes within your application. This is easier for the human mind to comprehend, thus speeding up production. The Singleton Pattern is a beautiful pattern put into place by the Redux team and one of the major differences between Redux and Flux (another popular unidirectional data flow library).

The Connect Method

The Connect Method in Redux uses the Observer Pattern. I’ve provided the definition below:

“The Observer Pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes.”

Wow, that is a mouthful. Let's use Redux to make sense of it.

In Redux, it is possible for components to listen (or connect) to any part of the state tree. When the state changes, the components will update. This is an excellent example of the Observer Pattern. The observers are the components, and the subject is the state tree.

Learnings

So, what have we learned? We use design patterns everyday without knowing it. We also jumped into a deeper understanding of the Singleton and Observer Patterns and how these patterns work together.

These are just two of an endless list of design patterns. If you are interested in learning more about patterns, please check out my previous post on the Factory Pattern With React.

We're hiring! Do you like working in an ever evolving organization such as Zalando? Consider joining our teams as a Frontend Engineer!