Beginner’s Guide to Redux
Introduction
Redux is one of the most used libraries in front-end development and has gained this popularity because of its lightweight performance, its simplicity, small size (only 2 KB) and great documentation.
It also makes application easier to test, provides predictable deterministic state, makes application easy to debug, helps you scale well to large teams out-of-the-box and finally and most importantly it is opinionated and well controlled, which is good when you work with a large team.
According to the official documentation :
Redux is a predictable state container for JavaScript apps.
Another common definition is:
Redux is JavaScript library designed for managing application state.
Why redux?
Predictability of outcome
One of the benefits of Redux is that it makes state changes predictable and transparent. Every time an action is dispatched, the new state is computed and saved. The state cannot change by itself, it can only change as a consequence of a specific action.
Maintainability
Having a predictable outcome and strict structure makes the code easier to maintain.
Server rendering
This is very useful, especially for the initial render, making for a better user experience or search engine optimization.
Developer tools
Developers can track everything going on in the app in real time, from actions to state changes.
Checkout out this repo for more information on setting up and usage.
Ease of testing
The first rule of writing testable code is to write small functions that do only one thing and that are independent. Redux’s code is mostly functions that are just that: small, pure and isolated.
Check out this official documentation on writing Redux tests with Jest.
Organization
Redux is a bit sensitive about how code should be organized.All your actions, reducers are clearly separated from each other, which makes the code more consistent and easier to work with.
You may be asking what actions and reducers are. We will touch on them below.
Installation
Redux can be installed in a javascript project through npm or yarn.
npm install -S reduxyarn add redux
Principles of Redux
- State is immutable/is read-only. The only way to change state is to emit an action.
- The state of your whole application is stored in an object tree within a single store.
- State is changed only through the actions that are pure functions.
A pure function is a function which when given an input, will always return the same output. They basically take in data and return data and do nothing more nor do they produce any side effects. e.g:
Other properties of pure functions can be found here.
Understanding Actions, Reducers, and the store
To fully understand Redux, we first need to understand the parts that make Redux a whole. These parts include Actions, Reducers and the Store.
So let’s explore what each one does …
Actions
According to the Redux documentation, Actions are payloads of information that send data from your application to your store.
In layman’s terms, Actions are events that send communication to the Redux store.
They are made up of objects which have an action type which gets to be dispatched to the store.
Actions must have a type property that indicates the type of action being performed. Types should be defined as string constants.
Actions are created by the action creators that are pure functions and return actions.
Reducers
Reducers determine how the app behaves in response to the actions sent to the store.
The reducer is a pure function that takes the previous state and an action and returns the next state.
Assume we are building a todo app for the above action example. We would want to create a reducer function that will help add a todo to the Redux store. The following would be its reducer function.
To explain how the above reducer works:
- First we specify the initial state function todoApp(state = initialState, action). The initial state is the initial value for a data object or variable (in our case the state of our redux store) for the initial time.
- Initializing the initial state is important because it lets reducers specify initial data that makes sense to them as default arguments, but also allows loading existing data (fully or partially) when you’re hydrating the store from some persistent storage or the server.
At this juncture:
we handle the action ADD_TODO by using the object.assign() to avoid mutating state but instead, we create a copy of it and use the Object Spread Operator to concatenate a newly created TODO to a list of TODO items and set its completed state as false.
Things to note while implementing the reducer
- NEVER mutate state.
- DO NOT call impure functions such as Date.now().
- DO NOT perform side effects such as API calls and routing transitions.
The store
The store is the glue that hold reducers and actions together and has the following responsibilities:
- Holds application state;
- Allows access to state via getState();
- Allows state to be updated via dispatch(action);
- Registers listeners via subscribe(listener);
- Handles unregistering of listeners via the function returned by subscribe(listener)
NB: There is only ONE store in a redux application.
Data flow
The flow is termed to be unidirectional. That means data flows in a single direction from parent component which is responsible for holding the applications state and manipulating it to a child component which is only responsible of receiving data from the parent component and displaying it.
This makes it much more predictable than the MVC pattern whereby data flow is bidirectional, that is; when a single change from a user input is made, it can affect the state of an application which can be quite hard to maintain and debug.
Conclusion
After gathering this basic knowledge on redux basics be sure to try an build up an app using redux and connect it with React for a better grasp of redux and to cover aspects of redux that were not covered here.
Disclaimer: Be sure before using redux that you really need redux in your React app, cause you may not need redux.
Here are some resources that may be of help :
