First steps with Redux
Introduction
Recently at carwow, we implemented a calculator to make it easier for our users to estimate their monthly PCP payment when buying a car. Given we wanted to create it entirely in javascript it was a great opportunity to try new tools.
After a bit of research we came across an interesting lightweight and easy to follow React-like micro-library called RiotJS. Along with that we decided to use Redux.
Redux acts as a predictable state container for JavaScript apps that aims for a consistent behaviour. Its application architecture is based on Facebook Flux and Elm that provides a unidirectional data flow for simplicity. According to their website:
Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. These restrictions are reflected in the three principles of Redux.
- Single source of truth
- State is read-only
- Changes are made with pure functions
The very basics of Redux
With Redux the whole state of your application is represented by a single javascript object. That contains all the changes in the application like data or UI.
States are immutable so you always create a new state when an action is performed. In that way, it’s easier to keep track of all the changes during the execution.
The idea of immutable data adopted by Redux is an attempt to simplify the application development once it can’t be changed after created.
Facebook provides a library that enforces the immutable behaviour for the data. It’s called Immutable-js and it offers many immutable data structures such as List, Stack, Map, Set, etc. It’s could be a good idea to use it in combination with Redux but it’s not a requirement.
The state of the app is read-only and any change on it must be done by an action. An action is nothing more than a javascript object describing the changes on the current state. The only mandatory attribute for an action is its type (generally described as a string).
To apply a dispatched action and modify the current state of the application you can use a reducer. A reducer is a basic function like the following:
Note that we’re using Object.assign to create a brand new object containing the new state instead of mutating the current one.
Another important Redux element is the store. It’s mainly responsible for holding the application state that can be retrieved or updated and there’s only one store available.
A subscribe method is also provided in order to keep a callback that is executed every time an action is dispatched. In this way you can, for example, update the UI after a state change.
Useful Tools
Redux provides a nice dev tools to debug your applications. It allows you to live-edit your code and it has a useful “time travel” feature letting you inspect every state and action payload.
Conclusion
The idea of this post is just to give you a brief overview of the Redux principles. It works quite well with RiotJS and it’s a nice approach to keep the app behaviour a little bit more sane.
I’m planning to write a bit more about RiotJS and how it integrates with Redux in future posts. But for now I hope it inspires you to try it out by yourself. If so, the following section you can find some good resources to get your head around it.
Useful resources
Interested in making an Impact? Join the carwow-team!
Feeling social? Connect with us on Twitter and LinkedIn :-)
