Redux JS Introduction - What, Why and How to start
Categories - Redux Tags - Redux React Js JavaScript   Maniruzzaman Akash   7 months ago   494   0

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

1-Data-Storage

Components of the Ecommerce application will look like this -

2-Data-Components

 

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

3-Data-Communication-in-Component

 

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.

4-Change-Cart-Data

 

Here is how Redux will work with multiple datas

5-Redux-Basic-Data-Communication-to-Component

 

Redux Basic Data Flow Example with Action, Reducer, Store

6-Redux-Data-Flow

 

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

7-Redux-Component-communication

 

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

8-Redux-Final-Data-Communication-System
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:

 

Next
Day 2 - Redux Project Setup and Store and Action in Redux