1. Introduction to Redux State Management:

There are many popular libraries in JavaScript, and one of the most popular is React. React is based on a component-based approach which has made application development faster and easier. However, react is only the “View” part of the popular Model View Controller (MVC) framework. So, we need to keep track of the data while developing our application. Here, Redux comes into the picture and handles the application’s data flow from the backend of the application.

So, in this blog, you will learn everything about integrating Redux with our React application.

2. What is Redux?

Redux is an open-source library used to manage and change the state of our application globally as it creates a centralized “store” from which all the components in our application can access these states.

3. Benefits of Redux?

1. When using Redux, there is no need to keep states for every component. Instead, there will be a global state where we can store our data and be available to all the components in our application. In this way, it will be easier to maintain the application.
2. Redux makes the state predictable.
3. Debugging is easier.
4. Redux has an extensive community that contributes to the betterment of the library.

4. Commonly Used Terminologies in Redux

1. Store – A store is an object present centrally and keeps the record of various states in our applications and manages it using the dispatch function.
2. Reducer – Reducer is a pure JavaScript function that takes the state of our application and action as arguments and then returns a new state. Here, we write the logic to update the state of our application.
3. Action – An action is a JavaScript object sent by the dispatch function to the reducer. It is the command to change the state. It has two properties’ type’ and ‘payload.’ ‘type’ is the action, and the payload is the value by which the user updates the application’s state.
4. Dispatch – Dispatch is the function that triggers a change in the state.

5. Redux Flow Chart

We will create a new project in ReactJS using redux to understand the flow better.

6. Get Started with Redux

Open a code editor (I am using VS code) and open its terminal to create a new React project using the command

After the project is created, create a component folder where all the components will be there. Next, create another folder, “Redux.” In this folder, we will place all our reducer files.

To include redux in our application, open terminal and install react-redux

In the Redux folder, create a new file “appleReducer.js” In this, we will create an initial state in our application with the property apple

Then we will create a reducer function which will take initialState and action as arguments

Based on the argument, the appleReducer function will perform the task on the state. For example, let’s say we want to increase the qty by 1, so our action type is ‘INC_QTY’, which will increase the qty or return the state.

Lastly, we will export our appleReducer function. So, our reducer is now complete.

Now we will create a global store. So, we will make a store.js file. In this file, we will import the createStore method from redux and appleReducer

Next, we will create a global store and export it

So, both our reducer and store are created.

Now, we will create our apple component.

We will create an “apple.js” file in our component folder. Here we will create a simple UI using a functional component with a heading and a button.

We will create a mapStateToProps function that will return the state object as props to our component and a mapDispatchToProps function that will specify which action type to trigger.

Lastly, we must connect and export our components with the store. This will be done with the help of connect function. So, we will first import the connect function.

Now import the Apple component in our App.js file. If we want to store all the components in our application, we must use the ‘Provider’ component for it. So import it and wrap our component in it.

In this way, the store will be available to the Apple component.

Now the state will be available to our apple component as props. Our complete component code will look like this –

Lastly, we will start our server to get the output in the browser. For that, start the terminal and run “npm start.”

The output will look like this-

When we click Increase Quantity, the state will be updated, and the output will be printed accordingly.

So, we can manage the state globally using Redux in this way.

7. Use Cases:

1. When our application is extensive and managing the states for each component becomes difficult.
2. When the state of our application is frequently updated.

8. Conclusion

In this blog, we have learned how to use Redux with React, its various features, and the proper use case to use Redux. It is not always necessary to use Redux in all our applications. Our application will still work without Redux.

Feel free to ask any queries you may have while working on Redux, and I will be happy to help you.

9. About CloudThat

CloudThat is the official Microsoft Gold Partner, AWS Advanced Consulting Partner, and Training partner helping people develop knowledge on cloud and help their businesses aim for higher goals using best in industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

Feel free to drop a comment or any queries that you have regarding React-Redux, cloud adoption, consulting and we will get back to you quickly. To get started, go through our Expert Advisory page and Managed Services Package that is CloudThat’s offerings.

10. Frequently Asked Questions (FAQs)

1. When should I learn Redux?

For a new learner, I will recommend that you first be comfortable with React and manage states using components. Then, as Redux is used to manage the condition, you will really understand the benefit of using Redux when your application grows.

2. Can Redux be used with other frontend Frameworks like Angular and Vue?

Redux can also be used with React Native, Angular, Vue, and more because it is just used to store data for any UI layer.

WRITTEN BY Satyam Dhote