Hello there 👋, I am Ali, a MERN stack developer by heart 🧡. This is my first ever article on the internet. You may wonder, why first? It's because I have the fear of what other people will think about my writing skills. But, with this new year, I finally gathered my courage and decided to write on one of my favorite topics, i.e, react, redux.

So wasting no more time, let us start from the very basic. No prior knowledge is required to understand this article except some basic react terminologies and snippets.

Redux is like a deep ocean that can never be summed up in a single blog. I will explain everything one after the other and by the end of this series, you'll definitely fall in love with react and redux

I remember When I started exploring redux for react state management, I ended up reading 7-8 articles and completely messing up all the concepts into each other. For a beginner like me, that was too much to digest in one go and that's why I left the redux at that time.

As a result of countless brainstorming, the time when I finally understood the concepts of redux I was on cloud nine. I don't want my peers to suffer like I did because this is a sheer wastage of time and labor. This is the reason behind the creation of this redux series.

So let's start with one of the common questions 🧐

Why to use Redux 🤔?

If you search "Why to use Redux ?" on google you will find these results on the first page

these articles are pretty helpful but still, as from a beginner perspective I feel they are very long and after concentrating around 5 minutes I feel exhausted and lazy.

In simple terms,

We use Redux to extract the data flow complexity out of react components.

that's the main goal behind using the redux. If I talk about the advantages of redux it can take a separate article or you can simply google. I don't want that, I will discuss only those advantages that forced me to love the redux and write this article for the people like you and me.

1. No props drilling 🛠

Those people who don't know what props drilling is?

It is the method by which child components interact with the parent components to modify the parent state.

Let's suppose, you are working on a very simple todo list app, the common parent-child components relation will be like this

Honestly, there is no need for redux in this todo app because our components are limited and we don't want to do unnecessary complex stuff in such a small web app.

Take a step further, now you want some extra functionalities in your todo list to make it more productive, after going through various designs, you are finally done with the frontend and your component structure is look like this.

It has 3 levels and at each level, it has plenty of sub-components. Things are getting interesting here. Now, suppose you want to show different data based on the user interaction in level - 2 child component, which is getting the props from level - 0 parent component.

If you are a beginner and don't know redux, what you will do is

• Call the child's parent function

• Parent's parent function

• Parent's parent function and so on...

this will continue until you reach the level - 0 's parent component to modify the state.

This approach will solve your problem but it has three major side effects.

⛔ Too many re-renders

⛔ Repetitive code

⛔ Difficult to track individual component state

⛔ Why too many re-renders?🤔

React has a fundamental property which is rendering. It is triggered when the props/state of the component gets changed. Stop for a moment and think about it. In how many components you are changing the props to reflect the changes done in the leaf child to the top-level parent. As the root component state gets changed it will trigger every child to re-render who is receiving those props.

Solution ✅ : Redux works in such a way that you don't need to bother about the middle components. Just connect the parent component, child component through redux inbuilt functions, and you are done. Redux will notify the parent to trigger a re-render as soon as the child component interacts with the user. No other components will re-render other than these two and your application will perform much much faster than the previous scenario.

⛔ Repetitive Code

As you might have guessed how the repetitive code get's created. It is created through a continuous parent-child calling chain on each level. Repetitive code reduces the code readability for the other developers.

Solution ✅ : Redux make your life easier by using the proper function for a specific task which can be reused throughout all the application.

⛔ Difficult to track individual components state

This thing you will face for sure if you are not using redux. If you are thinking to create a complex web application without using redux then state management will be your nightmare. Believe me, I was so frustrated at that time it took me about 5 hrs to just make a function work properly. if you want to experience it make a little complex web app using props drilling you will thank me later 😂.

Solution ✅ : Redux creates a separate store ( like a powerhouse of states ) in the web application through which you can gain the ultimate power of sharing data to any component in the component tree no matter how deeply it is nested. No need to do props drilling anymore. This ultimate feature of redux makes me fallen in love with redux again and again ❤.

2. Scalable 🎨

If your web application is small you don't have to bother much about it but as soon as you start working on big projects which have a large codebase you will realize how cumbersome is to add functionality over an existing codebase. One small buggy change can crash your whole application.

So what you can do to avoid this problem? you might already guess it. Redux 💡 takes all complex data flow logic out of deeply nested components to give you a better modular, maintainable code structure.

This thing is not so important from a beginner perspective but as you progress from beginner to intermediate level this becomes too crucial for your web application to maintain its performance, modularity.

These were the two powerful features of redux that have helped me numerous times develop complex react web applications with ease.

If you made it through the end of this article, Congratulations 🦾✨ you just concentrated more than 9 min not everyone able to do it.

This was just a brief introduction about Why to use Redux? series to make you comfortable with how redux solves your never-ending problem.

In the next part of this series, we will start with a simple application ( you can suggest in the comments, what application you would like to build ) using redux. We will code it together step by step and I believe at the end of this series you will be comfortable using redux in any project.

Till then wait for the next part, and don't forget to tell me in the comments why you want to learn redux. Bubye 👋