Everyday a new and a fancy buzzword pops out of nowhere in this web development world and we want to learn it, because we are a bunch of curious people(or should I say “because we want to sound cool”). Yeah, Javascript guys, you feel me.
So, like every other Javascript developer, I started with VanillaJs and during this process I got to know about jQuery, being a “curious” fellow I started with it and till I completed it, I heard about AngularJs(Sounds cool, right?) So I learned it and then came Angular2, which got nothing to do with Angular1(like what the hell were these guys thinking).
And then someone told me about React(that sounded much more cooler than Angular) so I decided to learn it. And then in this process of learning React, I heard REDUX(what a dope word, right? Let’s learn it too).
What I want to say is, we should be aware of what features does the framework or library provides us with, which the former one didn’t, and then decide whether we want to use it or not rather than start learning it because it’s a new fancy buzzword. So let’s see, why we need Redux.
Why we need redux?
Before answering this question we need to answer another question:
Where does react fail?
What were the shortcomings of react that made developers use Redux?
React failed at state transfer between the components. Data transfer between the components in react is pretty messy, as it was hard to keep the track from where(which component)the data is coming from. It becomes really complicated if one is working with large and complicated apps.
Another problem with react was, unnecessary data being transferred to the components. See, the above diagram(a level is equivalent to a single parent-child relationship), a state from first level component has to be passed down to the fourth level component. Let’s first see how react does this and later we will see how Redux would approach it.
As we know, that in react, there is one way data flow. React would pass down the data from first level component to second level component and then to the third level component and then finally to the fourth level component. This is not a good approach as the data or state is passed to the 2nd and 3rd level component(which doesn’t require that particular state).So this is where react fails.
Okay, let’s answer the previous question:- Why we need Redux?
What redux does is,it solves this ‘state transfer problem’. In Redux, we store all the state in a single place called store. So when we look at the above problem of passing the state from level one component to level four component, it becomes easy, as all the state is stored in store and the level four component can directly access the required state from store(see above diagram). No worries of, from where the data is coming as store is the single source of truth. Clear code, easy access of state, easy state transfer are the major benefits of Redux.
Though, I wouldn’t recommend using Redux, until state becomes too difficult to manage in your application.
As of now, we know why we need Redux, In my upcoming articles, I will go through the core concepts of redux, some redux code and how you can use them in your own projects and become a cool kid.