Member-only story
A Simple Redux Tutorial: Starter and Complete Code Example
React and Redux front-end movie app demo with API fetch
It’s fair to say that there are now many popular JavaScript libraries that can enhance the potential workflow of React, and even though Redux can come off at first with a fair amount of overhead to implement, it is no exception!
Recent statistics indicate that over 1000 companies reportedly use Redux in their tech stacks, including Instagram, Intuit, and Swat.io.
That being said, we don’t need to implement an architecture the size of Instagram, nor clone its colossal nature to grasp the fundamental concepts of Redux (so don’t worry, we’ll have none of that)...
By focusing on some of the main principals that make Redux powerful, along with its design system and pattern, we can lay down a solid foundation to getting started with Redux without losing track and getting lost in the overhead.
If you’re starting with Redux coming directly from a beginner’s perspective learning state and Hooks, it may be prudent to hit the brakes and slow down as we reflect on a new underlying architecture of efficient and lightweight (2kb total size) state management.
The first important question we should ask ourselves before we begin is: “Why Redux?”
Why Redux?
Observe the infamous diagram below:
Ah, the infamous Redux model on our left demonstrates that the more complicated our app gets, the more confusing it may become to trace and share states with other components in the child-parent state relationship model.
We can easily see how this can get quite hairy with larger applications when we have bugs and or just keeping organized with data.
The model illustrating “With Redux”, however, shows how we can solve this problem. By creating a store that handles our…
