Redux JS Introduction - What, Why and How to start
Categories - Redux Tags - Redux JavaScript   Maniruzzaman Akash   3 weeks ago   134   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:

  • Redux is A Predictable State Management Library Manage Whole Applications State
  • Redux Follow Single Source of Truth Behave Consistence - Do Exactly What in Reducer
  • Redux is a Library or Framework Independent.
  • Redux Can work with -
    • React JS
    • Vue JS
    • Angular
  • 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.

 

Source Codes:

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

 

Previous
#5 Laravel Views
Next
React Context API - An Advanced Introduction and Complete Examples