Over the last week I build this application using React and Redux for the first time and found the experience to be extremely enjoyable. Redux packs a lot of power and I found that it was easier to learn compared to other libraries thanks to its great documentation. Before diving into why Redux is so amazing, I first want to give a high level overview of how Redux works.
A birds eye view of Redux
Redux is used to manage your applications data and is typically used with React (although it can be used with other languages and frameworks). Redux uses the idea of having a ‘single source of truth’ and all of your applications data lies inside of something called a Store.
Thus the data flow in Redux looks like this:
Action > Dispatch > Reducers > Store
An action will get dispatched and then a reducer will be called based on which action was dispatched. It’s important to note that the reducer needs be a pure function. The previous means you can not alter the Store directly and you must copy it every time you want to change data inside of it. The Object.assign() method that comes with es6 makes this process easy and you should look into the documentation if you want to learn more. Now let’s talk about what makes Redux amazing.
1. Time Travel Debugging
Redux’s Dev tools allow you to time travel through different states of your app.
2. A Data Charting Tool
The Data charting tool allows you to easily see what data is currently in your store and you can use the time travel debugger to see how that data changes over time.
3. It makes testing easier
Since your reducers are pure functions, which always return the same output every time you give the function the same arguments, testing can be simpler to implement.
The above are just some of the benefits you get when using Redux and I’m sure you’ll discover many more as you start playing with it. If you’re looking to get started with Redux, check out the documentation or this free video series by the creator, Dan Abramov.