Redux (Understanding State management with Redux in applications)
To understand Redux, its needed to understand State management first,
In general the word “state” represents the current situation of something.
Web apps which offers a lot of interactions has state, ex: if a user sign in to a website the state of the website changes, so if any actions happens, such as user made a post or liked others post, state management come to play. It updates state and change the view of the website.
now with the understanding of “state” lets dive in to the ocean 🌊 of Redux
For demonstration purpose we will describe Redux with React library. React is a open source library which is backed by Facebook that can be use for building awesome web apps.
State management in React
the Red and Blue balls are called Components in React. Components can be considered as different parts of a web app.
When the blue ball gets updated , the state changes with the user “Mitch” from above diagram. But to update the blue ball we need to pass the state from TOP Red ball to the top-right red ball then , it passes the state to the blue ball. It can be said that the state needs to be drilled inside other components to pass it to the target component.
For small size application it may not be an issue, but when the application gets large in scale it can become very difficult to manage the state in this way, lets see how 😵
OMG 😵 the state is flying everywhere in such manner which isn’t very efficient to be managed.
To address this kind of state drilling Redux was introduced.
What is Redux? Why Redux?
Redux is a state management tool that can be used for anything that has state. Surprisingly it goes very well along with React.
Characteristic of Redux:
— Good for managing large state
— Useful for sharing data between components
— Predictable state management using 3 Principal
3 principals of Redux
— Single source of Truth(STATE)
— State is read only.
— Changes made using pure functions( don’t modify the STATE instead update and return new STATE)
Pure functions 😇
functions that returns the same output on same input no matter how many times it has been called without making side effects. Side effect means modifying element of outer scope inside the function. So if a function needs to be pure it must not modify anything out of its scope.
Now lets find out how Redux can solve the problem of “state hell” in React
Remember the Blue ball from above discussion ?
in React when it(blue ball) needed to update, the state needed to be passed from the TOP ball to its children balls so the blue ball can be updated.
From above diagram we can see that now it doesn’t have to depend on other components it can easily fetch the data(state) from
THE SINGLE SOURCE OF TRUTH (which holds the entire state of the app)
So in this way every components can independently make changes which also solves the problem of prop drilling.
Prop drilling ⚓
lets say we have 5 components, component no 4 need a slice of the state of component no 2 to update itself .so in React the data(slice of state) needs to be passed from 2 to 3 then 3 to 4. The component no 3 actually doesn’t needed the data it only passed it to no 4. This kind of situation is called prop drilling. Which can harm the performance of the app in long run.
So when the application gets large in scale its very easy to manage state .
Now all the components can independently use the state and update the view.
There are situations when only a component needs a state that other components will not need. So these can be handled by using React component level state for that specific component.
The Conclusion
End of the day all Redux is a better way to structure the state management that can help an app to be more scalable in long term.