What is Redux?
Consider redux as a single global container also known as Store, where you can store your whole application data and later maintain the data flow to in the entire app from that global state/store.
What problems does Redux solves?
As we all know react is component based library. What does this means? This means that we can divide our web application into many number of different components performing their own tasks individually without effecting other components. Lets us consider dividing a simple website into three different components i.e. header, body and footer. By dividing into components we can assign the functionality individually to every components to its own scope. So here comes the problem, assume a situation where we want to pass the data from one component to other component, ok this might sound simple when we are working on a small project with three, four components and we can do it using the concepts of props. Now assume the same situation but this time we are working on a production scale projects with more then hundreds or thousands components and you want to pass some data from a top level components to some 100th level components surely you can do it by drilling down the props manually to every single components until the data reaches to the desired components. We cant pass the data directly from a top level component to a lower level components since react follows a good hierarchy for the flow of data. Now think once how much nasty the situation will get by using props in this situation. so to overcome this developers introduced the concept of redux and context API also known as state management concept in react which will overcome this hassle of props drilling for us. So in this blog we will be learning about redux and leave context API on other blog.
Redux vs Context API?
To be fairly honest you don't need redux untill and unless you are building a SaaS product which includes multiple hierarchy of admins, multiple instances and thousand of components. In earlier time we needed redux because there was no other way of working with these things, then came up what we all love is context API a far lesser complex then Redux. Everything we do with redux can be done with Context API. Then why we are learning Redux? Surely context API can be a complete replacement for Redux but still for any larger projects company always prefer Redux. So to survive in the community sooner or later you have to learn Redux no matter how much you hate Redux like I do. Trust me I tried not learning it too and now as can see after few months i am learning it too. So keeping your sentiments and fear side lets try to learn redux. i will definitely try to grill it down to very basic level.
Redux Architecture:
There are basically four pillars in redux:
1- Action-
collect data from component or API.
2- Reducer-
Get Data from Action and sends it to the store.
3- store-
Global state of the complete application.
4- view-
The frontend part of the application through which the user can interact.
Principles of Redux:
I personally follow these three principle while working with rudux. these principle are not written in any official doccumentation but taught by a well known instructor on internet. Following these principle makes my redux concept very clear thats why i am sharing it.
- Single source of data:
There must be only single state or the global state to store the entire data of the application. No matter how complex the application is or much components we have we have to store the data into a single global state. What problem does it solves? the problem of props drilling and finding out the data when neded can be overcome easly because we are centerallising the data into a single global state and later pass it to different components when needed without using the props.
- Global Sate is read only:
Global state can always be in read only. This allows us to not having a issue where we accidently mutating the global state and break down the whole app by messing up with the global state. Yes purposefully we can perform any operaion to the global state but only by firing up some actions and we have to follow it in every single place.
- Changes are made with the pure functions only:
When we makes the changes with pure functions then there is always a less chance that anybody else can mess around with our variable. How and What is Pure function? Pure function simply means all the that are stored inside one function and when the function successfully executed all the data got disappears this will help in writing a precise and concise code so don't forget it.