What Is Redux in React ?
Redux is an open-source JavaScript library used to manage application state container for JavaScript apps.
Redux is a state management tool. But it does not belongs to the component state.
It is a container where you can store your whole application data. In a simple way we can say that it is a kind of array.
Redux can be used with any JavaScript framework or library.
Redux stores the state of the application, and the components can access the state from a state store.
What Is React ?
It is a declarative, efficient, and flexible open source JavaScript library for building user interfaces specifically for single-page applications.
React is created by the Facebook.
It lets you compose complex UIs from small and isolated pieces of code that is called the “components”.
React is used in Netflix, Airbnb for their websites and their mobile applications.
Architecture of Redux
Here we will take an example of react application to understand how it works. Suppose we click on a view GetData button then the event is fired and action is called the action will request the data from the api and send response to the reducer. Reducer will send the data to the store and the view will be update.
The three most important redux priciples are:
Store: It contains the state of entire application list. In another way it holds the application’s state tree. There is only single store in the redux application.
The current Redux application state lives in an object that is called the store.
Action: When an event fired from any view whether it is generated by selecting a radio button, selecting a checkbox or clicking a button. This is called action.
Action is a pure object created to store the information of the user’s event. It describes a state change.
Actions are payloads of information that sends data from application to store.
It contains type of action, time of occurrence and which states it aims to change.
Reducer: Reducer is a pure function that receives the current state and an action object and returns a new state with the actions performed.
The Reducer acts as an event listener which handles events based on the accepted event type.
Reading the payloads from the action and then updates the store via the state accordingly.
Importance of Redux
When we create components in our react application then we need to communicate one component with another component directly. And it can not be done without redux instead we have to inform to parent component to change the text.
The component does not need to provide any state or method for its children components to share data among themselves.
Generally, Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable.
Redux makes the state predictable and it makes debugging easier.
It helps when multiple components need to access the same application state.
Conclusion
In this blog, we learned about Redux and its importance in React.
