React Redux: An introduction for beginners with examples

React Redux: Introduction

To know what React redux exactly is, we must first know about the states while writing code in ReactJS.There are several situations when we need to update the state after a certain action is completed.

Updating the states is quite easy with React. But what if we have to pass those states from one component to another? Well, one can easily answer this by saying “pass the state to other components as props”. This is true and easy in most of the cases where the project is small-scale.

But what is the problem with large-scale projects? Let’s take a simple example for this. Let’s say we have 3 components: Parent-1, Child-1, and Child-2, where Child-1 is a child of  Parent-1 and Child-2 is a child of Child-1. Now if we want to pass a state variable from Parent-1 to Child-2 which will not be required in Child-1, then in the traditional ways, the state variable must pass from Parent-1 to Child-1 to Child-2 as props even though it will not be needed in Child-1.

This solution seems easy but as the application grows bigger, it becomes really tough to figure out which props values are updating from which components. In this situation, data can flow from one part of the UI to another and change in unpredictable ways. We’ve to write a lot of code to keep everything in sync and when something goes wrong figuring out how the data changed and where it came from becomes really complex. In such scenarios, React-Redux comes into the picture.

What is Redux?

In simple words, Redux is a state management library, which was developed for state management in JavaScript applications. Redux can be used for state management in all the javascript applications including the frameworks of JS like ReactJS, VueJS, etc.

What about React-Redux?

React-Redux is the official Redux UI binding library for react. If we are considering using redux for state management in our React application, then we should use React-Redux to bind these two libraries together.

Redux Cycle

Now, let’s first try to understand a basic cycle or workflow of Redux that we use in our React applications by taking an analogy of a student’s examination.

For example, whenever a student appears for an examination, his/her result of the exams can be collected from the principal’s office in the school after the results are declared. Let’s break down this into the following steps:

• A student who is responsible to appear in the examination.
• The student completes the exams of each subject.
• The subject teacher of each subject examines each subject and assigns the marks for respective subjects.
• The class teacher compiles all the subject’s marks and declares the result that is stored in the school’s record.
• The school’s record gets updated with the most recent examination results.

We can compare this with the flow diagram of redux for each step to get a better understanding of it:

• Action Creator: There is an action creator in our app which is responsible for triggering certain events. Let’s say this is the student in our analogy.
• Action: It is responsible for triggering a particular event in our app. For e.g. the API calls that we make from our app can be considered as an action. In our analogy, the student appearing for the exam is an action.
• Dispatch: Whenever an action is completed, it should be dispatched to the reducers. The subject teacher assigning the marks after checking the exam papers can be compared with this dispatch event.
• Reducers: The reducer is responsible for handling the dispatched events. It checks the state that needs to be updated in our application and sends it to the store. The class teacher updating the marks of each subject is similar to reducers updating the store.
• State ( Global Store ):  This is the final state once an action is completed which is responsible for changing the states in our application that were updated with the triggered action.

Redux Cycle

Student appearing in an examination

This analogy helps us to understand the basic flow of redux. The comparison of the redux cycle with a student appearing for an examination will help to remember the flow of data and how the state changes in an application when redux is used. 

Pros and Cons of React-Redux:

Now let’s learn about some of the benefits and limitations that we can expect while using redux for state management in our React application.

Pros:

• Clean code architecture: While using React, it is always possible to write all the components in a single file. But when the application grows bigger, the code architecture becomes an issue. So, redux provides us with ways to create separate components for complex actions. This will make the components unaware of Redux and we can simply use our components by fetching the required states from the store. This will eventually help us to test and reuse our components.

• State transfer: Managing and transferring states from one component to another can be really tough when the application size grows. Redux helps to create a store where we can store all the variables that we may need in multiple components. It also allows us to call state data from any component easily.

• Performance optimization: The main reason for introducing React was to prevent unnecessary re-renders of components in an application. Redux implements many performance optimizations internally so that the component only re-renders when it actually needs to.

• Improved testing and debugging: Redux makes it easy to test and debug the code since it offers powerful tools such as Redux DevTools in which you can track each step of the flow of data to debug, track state changes, and much more to streamline the development processes.

Cons:

• Complexity: Although React helps to manage state in bigger applications easily, it may increase complexity if used in smaller applications. So, we must decide first whether or not redux is needed in our application. Obviously, this can be realized when you start to develop React applications.

Conclusion:

When getting started with redux, one might feel that it is unnecessarily increasing the complexity of the application and those steps can be completed without using redux. This may be true in some cases but when the application size grows, Redux will be worth using to maintain the code architecture and improve the readability of the code.  Redux will really aid you in keeping a clean and consistent structure of your project. Redux ensures a clear data flow and makes the components always stay in sync. It is a must for the optimal handling of any application with a large number of components.