What is Redux ,Why do We Use It ?

I assume that you have prior exposure to JavaScript, React, and ES6 before starting this lesson. I strongly advise anyone who is unfamiliar with any of these topics or ideas to go through tutorials based on them.

Redux is a predictable state container made to make it easier to create testable JavaScript applications that work reliably in client, server, and native environments. It allows you to keep your application’s state in a store, where any component can access any state that it requires.

Although React uses it primarily as a state management tool, you can use it with any other JavaScript framework or library.

State management :Any dynamic application must have state management as one of its essential and inescapable aspects. It refers to the concept of sharing application data among several components of the same application, with each component having the ability to read and modify the application state as necessary.

Reasons to Use Redux:

• The same application state is required for access by multiple components — For instance, information about a user must be exchanged among a variety of components that may not immediately interact once the user signs into a personal account on an application. Redux’s single store is an effective technique to map a state across components in this situation.
• When you and other team members are collaborating on a sizable application — Again, as an application’s complexity rises, the Redux single store is more advantageous. Redux can also help keep everyone on the same page if many people are working on it (and you don’t have an alternative system for sharing information).
• when the application state is frequently updated — This often implies consumer-facing applications, where there is a lot of user interaction (for example, adding goods to a basket, then removing some, going through the payment process, etc).

Let’s see Pros and Cons Of using Redux:

Pros-

• increases a state’s predictability
• It is Highly Maintainable
• It stops re-rendering
• Performance is optimised by Redux
• provides testing ease
• beneficial for server-side rendering
• Facilitates Debugging

Cons-

• Time Consuming
• Increased Complexity
• Excessive Memory Use
• Lack of Encapsulation
• Restricted Design

Redux is most frequently used for React projects, while it may also be utilised with other JavaScript libraries like Angular or Vue.js.

It can be challenging to run the state. Even though react gives us the state property, when the application expands, moving the state from component A to component B can get fairly complicated. Here is a straightforward illustration of why redux is necessary.

Consider a programme that has the “Users” and “Products” functions.

The implementation of user authentication allows users to register, sign in, and only view the dashboard after successful authentication. Because the “Cart” activities can only be accessed when the user is signed in and authenticated, the other functionality “Products” also need user authentication information. A lot of state and properties need to be passed from the “Users” component to a different area of the application called “Products” in order to obtain user authentication information at this point. Redux steps in at this point by offering a central store (which stores all application state) that is then accessible to the entire application.