Chapter 16. Managing States with Redux

Remember that, previously, we said that it is not good to have application states in multiple places, because it makes debugging much harder. Therefore, we moved states from the input components to the form components. But now that we have two forms, we once again have states in two places. Therefore, we need to move the states up again. The most ideal case is where our application has only one state store.

However, if we keep moving states up, and passing the relevant state properties down as props, it can be quite un-performant. Let's say a component is nested 20 layers deep; for it to consume the state it needs, the state needs to have passed through 19 components.

Furthermore, let's say the same heavily nested component needs to change the state; it will have to call its onChange prop, prompting its parent to call its onChange prop, and so on, and so on. Having to call 20 onChange functions for every state change is ineffective.

Luckily, people have...

State management tools

There are many state management libraries out there, with the two most popular being Redux and MobX.

Redux

In Redux, you keep the state of your application inside an object literal that belongs to a store. When the state needs to be changed, an action describing what has happened should be emitted.

Then, you'd define a set of reducer functions, each responding to different types of actions. The purpose of a reducer is to generate a new state object that’ll replace the last one:

This way, updating the state no longer requires calling 20 different onChange functions.

However, you'd still need to pass the state via the props of many components. There’s a way to mitigate this through the use of selectors; but more on that later.

MobX

Mobx incorporates functional reactive programming principles, and uses observables as its stores:

You can tag entities (for example, objects and arrays) as observables using the @observable decorator. You can also tag some functions with the @computed...

Converting to Redux

Let’s start by installing Redux:

$ yarn add redux

There’s also an official React binding that provides the connect method that helps you connect a component to the store:

$ yarn add react-redux

You may also want to install the Redux DevTools (https://github.com/reduxjs/redux-devtools) as it'll make debugging with Redux much easier.

Creating the store

As mentioned previously, the entire state of the application is stored as a single object inside a construct called the store. The store is central to a Redux application, so let’s create it. Inside src/index.jsx, add the following lines:

import { createStore } from 'redux';

 const initialState = {};
 const reducer = function (state = initialState, action) {
   return state;
 }
 const store = createStore(reducer, initialState);

The createStore method accepts three parameters:

• reducerfunction: A function that takes in the current state and an action, and uses them to generate a new state.
• initialStateany: The initial state. The initialState...

Summary

In this chapter, we have migrated our code to use Redux to manage our state. Having a single state store makes things much easier to manage and maintain.

We have now finished our mini-tour of the front-end world. In the next chapter, we will look at how to use Docker to containerize our applications and make each service more independent and self-contained.