Introducing Redux Zero
But for some cases, Redux is way too much. Maybe you don’t want to add all of that boilerplate to your project. Or maybe the learning curve of Redux is too steep and you just want something simpler to work with.
How Redux Zero is different
The name “Redux Zero” was chosen because of two important characteristics of the library:
- No reducers (or zero reducers)
- It’s lightweight (or zero calories)
That’s why the library is smaller than 1kb (gzip) and the learning curve is so low, you don’t have to learn about dispatchers and reducers, just add some actions and call them from your components!
So what does it look like?
Here’s a working demo increment/decrement app using Redux Zero:
Let’s dig in and understand the code.
First, create your store. This is where your application state will live:
Then, create your actions. This is where you change the state from your store:
By the way, because the actions are bound to the store, they are just pure functions :)
Now create your component. With Redux Zero your component can focus 100% on the UI and just call the actions that will automatically update the state:
Last but not least, plug the whole thing in your index file:
How simple was that? 💙
And of course, a big shoutout to Dan Abramov because without Redux, Redux Zero wouldn’t exist.
Liked the idea? Please give Redux Zero a star 🌟 and share this post with your friends.