The concept behind the Redux

Hello friends, I’m Rusiru Abhisheak and in this blog, I’m going to write about how actually Redux works behind the scene.

Before we learn behind the scene of Redux, we necessitate knowing what is it.

So, what is Redux?

Redux is an open-source JavaScript library for managing the application state. Everything that is needed to keep the application up and running is called the state of the application. By using Redux we can build more complex user interfaces for web, desktop and mobile applications by managing the state of that application. Redux is most popular and most commonly used with JavaScript libraries such as React, Angular and Vue JS for implementing user interfaces. The combination of React and Redux is more popular than the combination of Redux with other JavaScript libraries and frameworks.

Why we use Redux?

It is not mandatory to have Redux to build applications with React. You may be thinking, why developers need Redux even though they can build applications without it. Literally, the increasing complexity of state causes to arise problems in the application. The application may be crash or show unordinary behaviour if developers don’t supervise the state. I will give out the real-world scenario and show you how the problem arrives.

Problem with only using React

The above picture illustrates a simple web application interface for managing books of the BookShop.com book store. There are two main components called the Parent component and the Child component. The Parent component contains details of all the books in the store and the child component is used to display the details of a single book. Parent component can contain multiple child components.

How these two components associated with each other?

The Parent component holds details of all the books inside an array and it uses JavaScript functions to map that details into one single book component (also known as the child component). The single book component shows all the details related to one book.

Now we know how these Parent and Child components are associated. Think you want to delete “Book 2” from the book list. So, you click on the “Delete” button. What will happen if you click on the delete button. It should remove “Book 2” from the list and update the list interface, right? No, if you only use React to implement the above interface, nothing will change and the interface looks the same. So, you may click the delete button, multiple times, to delete the book from the list.

What happened?

Truly, “Book 2” is successfully removed from the book list. But the problem is there is no way to notify the Parent component and tell update its state according to the modified book list details. Because React does not support passing props from child component to parent component. React allows only to pass props from parent to child component. This is the problem that happens when you create applications without using Redux.

How Redux solve this problem?

Redux uses a global store/store to save the state of the whole application. Instead of saving the application state at the component level, Redux create a large JavaScript object to hold the state. Any component that wishes to access state data, can use this global state to get data from it. The below illustration shows how Redux contains the application state.

In Redux, we use a global state/store to save all the book details instead of saving them in the Parent component. Previously, we map all the book details to a single book component inside the Parent component. In here also, we map book details inside the Parent component, but at this time we take all the book details from the global state.

In Redux, we mainly talk about three things namely Actions, Reducer and Global State/Store. First, I explain these things separately and then describe how they communicate with each other.

Actions

Actions are plain JavaScript objects that have a “type” field. This “type” field tell what was happened in the application. apart from the “type” field, Action can contain another field called “payload” which holds actual data in the Redux action object. Every Action in the application returns an object which contains “type” and “payload” fields.

Reducer

Reducer is a function that takes the current “state” and an “action” as arguments, and return a new state which contains new data of the application state.

Store/ Global State

A store/ global state in Redux is a JavaScript object which holds the internal state of the application as its properties. One Redux application should have a single global state/ store. But there can be multiple Reducers to manage the global state.

How these are related to each other to accommodate better management for application management?

When the application components are rendered, all data that must pass over to the parent component first comes to the global state. Let’s go back to the prior example.

During the loading process of the BookShop.com application, the parent component calls the necessary Action to fetch all the books details. When the parent component calls the action, it passes what kind of action need to take as a “type”. The Actions use the dispatch method to take the action/ event which passing to it. Then it executes the required function to get detail of the books from the database or any other source. After obtaining the data, the Action returns an object with the “type” and “payload” which contain all the book details to the store. Actions cannot directly call the reducer functions. It just works with the store. The store is responsible for calling reducer functions.

Then Store passes this object which returns from the Actions to the reducer. The reducer takes the previous state and object as an argument and returns the new state to the store. Redux does not modify the current global state, because it is immutable. Instead, Redux create a new version of the global state and return it.

This new version of the global state contains all the book details. As soon as the store update with the new global state, it notifies the parent component that book details are available in the store. Then the parent component maps book details which are taken from the store to a single book component. (This process is similar to the previous parent-child mapping which I explained in the above section. But the only difference is, at this time we get book details from the store instead of loading them in the parent component). Now all the book details are displayed on the BookShop.com application.

Now, what happened if the user clicks on the delete button?

When a user clicks on the delete button, it performs the necessary action to remove a book from the application (database). Then the action passes the “type” and “payload” to the current store. Store passes the previous state and the action(this is an object which returns from the action) to the reducer function to release a new global state which contains the updated book details. This updated book details did not contain the book which is deleted earlier. Reducer passes this new global state to the store. As soon as the state is updated, it notifies the components that the data in the store has changed, then updated the current view. This updating view operation was done immediately and automatically after the current global state was changed. So, the updated view does not show the book which deleted. The same method can apply for creating, updating and searching functionalities.

This is who Redux solves the state management problem in an application.

I hope you learn something about Redux. Thank you!