Why do You need a centralized State in React | Why you need to learn to manage State in React. What Exactly is REDUX #REDUX #CONTEXTAPI

Well if you have just started learning react or if you are at an intermediate level there is a pretty high chance that you’ve heard about “REDUX” or “CONTEXT API” kind of fancy words laying all around REDDIT and dev communities. Not to mention a lot of jobs and almost 60% of React Apps are built using “REDUX”. So, it's a mandate for you to learn these state management skills in order to get a job or stand out from the crowd of React developers.

When we build React Apps we split the UI which is all a single page application into components that dynamically change the app data and give us a fast UX. So in order to pass any kind of data or state from one component to another, we use “PROPS” to send those data to the child components. This works pretty well if you have a simple App.

But the problem arises when your App becomes Complex with a lot of components and a lot of data to manage and make them flow across the UI of your App. Here your PROPS methodology gets crazy and starts to become a nightmare for you to mutate the data and solve all those random bugs which arise. Moreover, it's very hard to test these kinds of Apps. So you end up storing all your states, data, and their related functions which mutate them into the Main or the Topmost component which is probably the App.js file, and then pass it to all the children with the functions to change the data.

And this is where the concept of a centralized State comes in handy. So instead of relying on your PROPS for flowing the data, you store all of the data into a separate place apart from the App. By Apart I mean it’s not present in any Component. And from here you give access to all the children components whom you want to give the data and also you give them direct access to mutate the data instead of drilling functions into PROPS to change them. This is the problem that REDUX and Context API solves. They centralize the state for you at a place apart from your UI components and then give you some functions which are conventionally called “REDUCERS” to change the state and these reducers return a new state to you based on what you needed to change.

Also, the changing actions are defined by you to restrict the mutation of data. These actions are “DISPATCHED” from the component to make any change in the centralized state and the “REDUCERS” act as a mediator between the component and the centralized state to make any changes. That's it I hope you got a slight idea on why these State management APIs are becoming so popular and a mandate for any front-end developer. Do let me know if I have said anything wrong or missed any point in this and would love to hear your suggestions on this below. Till then stay safe and keep coding.