Table of contents
If you've used React.js then you've probably heard of Redux too. Redux is a library built for implementing concepts like the Context API and reducers cohesively, rather than independently trying to piece together hooks provided to us by the React ecosystem.
Redux has its nitty-gritty details, and in this article I intend to explain and illustrate them to you with examples. Let's get to it!
Context API vs Redux Store
Let's say you have an e-commerce app built using pure React.js and Context API. This is what the data flow in your contexts look like:
As you can see, the actions dispatched by the components only get passed to the appropriate contexts. This has some limitations. If you were to scale your app and you needed to connect the different contexts this flow of data won't work. What if one context change dispatches an action to another context? This would become messy. To avoid this behaviour in enterprise-level applications, Redux was built. What would data flow in a Redux app look like?
That... got pretty messy. What you'll observe is that all the actions get passed to the Redux Store, which is just a fancy term for the global application state. From there on, it dispatches the action to every single reducer, not necessarily the 'appropriate' one. If a reducer needs to act it will return a modified state. If not, it will make no changes to the state in the Redux Store.
That's the basic concept of Redux! I'll soon be releasing a blog post on how to use the Redux ecosystem to make your Context-driven React.js app more flexible and modular. If you don't want to miss that article, make sure to follow me and subscribe to my newsletter.
I learnt the basic and advanced concepts of React.js from these 3 amazing Udemy courses bound to make you a successful javascript dev. If you wanna up your Web Dev and JS game, these courses are a must for you.
Thanks for reading! I highly appreciate any feedback, positive or negative, in the comments section. A click on the favourite button and following me goes a long way :)