React Redux Basic Introduction

React Redux is the official Redux UI binding library for React.

Redux is a predictable state container for javascripts Apps.

Let’s break definition into three parts to better understand:

1. It is for JavaScript apps.
2. It is a state container.
3. It is predictable.

1. Redux is for JavaScript Applications:

Redux is not tied to React. It can be used with React, Angular, Vue, etc.
Redux is a library for JavaScript applications.

2. Redux is a state container:

Redux stores the state of your application.

Let’s Consider a React app- where you manage the state of a component.

The state of an app is the state represented by all the individual components of that app.
Redux will store and manage the application state.

For Example: Suppose we have three component named: LoginFormComponent, EmployeeListComponent, Application.

All Component have own state value but the state will change depending on activity or process.

LoginFormComponent:

state={
username:”,
password:”,
submitting:false
}

EmployeeListComponent:

state={
employees:[]
}

Application:

state={
isUserLoggedIn:true,
username:’pradeep’,
profileUrl:”,
onlineUsers:[]
}

3. Redux is predictable

What is predictable?

Let’s understand the previous point:

Redux is a state container and the state of the application can be change.

Ex: Employee management app- employee Register(pending) -> employee verification (Active)

In redux, all state transitions are explicit and it is possible to keep track of them.
The changes to your application’s state become predictable.

So now you have clear in your mind:

“Redux is a predictable state container for JavaScript apps”

Manage the state of your application in a predictable way, redux can help you.

Difference b/w React and Redux

React: It is the UI library used to build user interfaces.

Redux: it is the state management library in a predictable way in javaScript application.

React Redux?

Why would we want to use redux in a state application?

Check out the below image:

In the above image, you can see the left side last component which is the child component of “Employee” has a state value “{name:’P’}”. If you want to share state name value with the “profile” component then you can’t share state value directly with the “Profile” Component. You need to follow the below steps:

First, you need to pass state value “name” with “Employee”. After this.

You need to pass state value as props in the App component. After this, you will pass state value with Profile Component.

So, you can see it is the long process to send and receive state value from one component to another component.

Redux is the best option to manage the state value between components without a multiple-phase process.

How Redux will work with React?

Components in React have their own state. The state of the component will update based on activities.

Let’s understand this with an easy example:

Suppose, you want to buy a book. Then what you will do?. It’s easy, you will go to any book shop and purchase the book from the shopkeeper. The shopkeeper will generate a purchase receipt for track records and update the book stock. You will pay the amount and come to the home with your book.

Book Shop Scenario:

1. Shop — holds a book on Shelf
2. intention to BUY_BOOK — Describe what happened
3. Shopkeeper – Remove the book from the shelf and Generate Receipt to Track Record.

The same way Redux work with React. Let’s understand with grapical view.

Redux Scenario:

1. Store — Holds the state of your application
2. Action – Describes what happened
3. Reducer – Ties the store and actions together

Here you can see,

Redux will work as a Shop or Store where our state will store for every component.

The component will work as a customer when the component needs any state value then it will tell to the reducer to provide state value or update and manage state value.

The reducer will work as a shopkeeper who will manage the state value in the Redux Store.

Both work independently

React Redux is a library that provides bindings to use React and Redux together in an application.

Also SEE React JS Tutorials in Hindi

Best Web Designing & Development Service in New Delhi