Redux JS Introduction - What, Why and How to start

In this tutorial, I'll show you

1) What is Redux,

2) Why We've to learn Redux

3) Which specific problem solved by Redux

4) Why Redux is Beautiful and we must learn it to become a pro React Developer.

What is Redux:

1. Redux is A Predictable State Management Library Manage Whole Applications State
2. Redux Follow Single Source of Truth Behave Consistence - Do Exactly What in Reducer
3. Redux is a Library or Framework Independent.
4. Redux Can work with -
   1. React JS
   2. Vue JS
   3. Angular
5. Persistence Data could be saved across whole application Can prevent all re-render

Practical Example of a Project

Let's assume, we have a simple E-commerce application. So, here will be the data storage system of this

Components of the Ecommerce application will look like this -

Components communication with the data for this Ecommerce application will look like this -

Now we assume, we have to change the cart in normal application. and look how data would be transfer and I think it is really rediculus.

Here is how Redux will work with multiple datas

Redux Basic Data Flow Example with Action, Reducer, Store

A practical thing for User data get using redux would be followed this way.

Final Redux implementation of that redux application will look like this -

So, I think you've cheked now, it's awesome and no need to component level drill down.

Pros of Redux:

1. Using Redux, we don't need to pass props from component to component.
2. We can manage single source of truth of Data
3. State could be persistent or non-persistent very easily.

Cons of Redux:

1. Redux comes extra boilerplate.
2. For Beginner level React developer, redux is a hassle.

My Opinion About Redux:

I've worked on many React application which are from beginner to very big ERP level solution. From my previous experience with React is, state management is really hard for some intermediate level application. There redux gives me the power of speed and performance and manageability. 

Redux is hassle just first time, but if it is comfortable to you once, you would not write single state manage without Redux(but that was also extra). Once you learn it, you never regret and you'll be one step ahead as a frontend developer.

Let's start Redux from our tutorial.

Source Codes:

All of the source codes of this repository has been uploaded to a github repository - https://github.com/ManiruzzamanAkash/redux-learning

Video Tutorial If Needs: