Automate Marketing Initiatives with Salesforce Marketing Cloud Learn More

Build Easy to Test Programs with Redux

Redux provides a great developer experience, with large ecosystem of add-ons to fit your requirements. This article contains everything you need to know about Redux. We will go from the concepts to practical examples. By the end of this article, you will be able to build a counter-program to understand how to use redux in react project. 

The program we will make is basically a simple increment and decrement counter program in React that you will see on many ecommerce websites like Amazon, Flipkart, and Myntra, for increment and decrement quantity of the product you want to purchase from these websites. 

Build a Single Global Store for Your Program with Redux

Redux is an application state container tool allowing you to establish a single global store for your program. And that one store can be accessed by all components. 

It might be tough to transfer props and state to child and sibling components in a react application, so redux was created to allow us to pass data through any component using redux. 

The React Redux library is not React-specific only . It’s a library that may be used in conjunction with any other library or framework, including Angular, Vue, and plain JavaScript. 

Understand State flow

State management is a way to present the data you use in your application in the form of data structure. Therefore, it will be easier to exchange this data between components. It facilitates communication between the different components and lets them know about any updated data in an easy way. 

In React, there are many useful libraries for state management scenario: Redux, Recoil, context Api etc. 

Redux provides one single store that you can store a large amount of data. 

Redux Practical Example 

This app allows you to increase or decrease the value of a state with the help of redux in your react application. 

You can use this logic in your any ecommerce react project to increase or decrease product quantity. I had used it in a react project. 

Installation in Application  

After creating your first react application with react app do the following steps to install redux. 

Remember that both redux and react-redux must be installed.  

We can create the store with redux, and we can use redux in a React app with react-redux.  

Create a folder called Store after the installation is complete. Create two new folders under this one, one named actions and the other named reducers. 

 You can name the folders whatever you wish, but this is the recommended method. We should always name folders and files according to the action we are about to conduct, so that any new coder can comprehend them. 

Coding

In order to work with redux, there are few steps to go through which are applicable no matter which type of application you are building. You can go through these steps: 

1- Understand actions 

2-Understand reducers 

3-Understand store 

4- Dispatching the actions 

Actions

Action is merely a function that returns a two-attribute object: – 

  1. Type: a string that describes the action you’re performing.  
  1. Payload: – Payload is the data you’ll use to update your state. 

In our scenario, we’ll need two actions: one to increase the status, and another to decrease it. 

Recommendations suggest to write action using capital letters. 

Reducer 

The reducer is the function that performs the incrementing or decrementing operation. It requires two inputs. The first parameter specifies the state to be updated, while the second specifies the action to be performed on the state in order to change it. 

It’s vital to note that whatever you supply as the reducer’s first parameter will be recognized by redux as the state and will be automatically recorded in the store. 

We created an object initialState and used it to initialize the state parameter. 

The reducer will return to the state with the same fields unmodified, except for the count field, which will be added to the value of the payload, depending on the action type ‘INCREMENT’ or ‘DECREMENT.’ 

Store 

We need to create the store now that we have our actions and reducer ready. Do the following in the index.js file. 

To create the store, we utilize the createStore method from redux, which looks like this: – 

We use the Redux dev tools extension to better visualize the state that is being updated. Simply add it to your browser and then, alongside the reducer, add the following to your createStore method. 

We use a Provider that we import from react-redux to make the store accessible to all components. Supplier passes the store to our app as a prop. All of the components will be able to access the data. 

 If we want to get any data from redux store, or want to get redux state we can get it by: –  

Defining the Dispatcher 

UseDispatch hook defines the dispatcher. The dispatcher is a function that takes an action as a parameter and instructs the reducer to do it.  

When we press the + button, the dispatcher sends the increment action to the reducer, who then performs it on the state.  

When we press the button-, the dispatcher sends the decrement action to the reducer, who then performs it on the state.  

However, how can we get the state from this file? 

Because of the store, we can utilize the useSelector hook, which takes the state that we saved in the store as an argument by default.  

Then we may utilize it to go to our state from any component. 

React State Management Flow 

Below diagram will show you a basic flow of react redux store to any other component from parent to child component and their sibling component. 

There is only one store in which we have only one single state and data is passed through any component from parent to child and so on smoothly without any hurdle. 

Conclusion

As we have seen that Redux is very easy to use and time saving. Redux is not necessary for the react application but if we use redux is our application it provides a better user experience as everything goes faster and smoother. And if you build a large and complex application then it is a very powerful tool to manage your application states.   

I personally use redux in my two react applications and trust me it is a very helpful tool for state management. 

aayushi.joshi

Author

Share On

Let’s
Work
Together

aayushi.joshi

aayushi.joshi

Top Stories

Zabbix Vs Nagios
Zabbix vs Nagios Core – All Key Features & Functionalities Compared
Choosing an efficient IT infrastructure monitoring system for your business can be overwhelming, as you need to take many features, factors, and functionalities into consideration. Technical and business requirements need to be assessed, in addition to examining any anomalies in the deployment or support processes. The level of competence of
Implementing a Raspberry Pi and Arduino UNO Based Current/Voltage Measurement System
In this article, we show you how to measure the AC Current and AC Voltage using the ACS712 current sensor and ZMPT101B voltage sensor. In addition to the Wattmeter, this circuit also acts as a Voltmeter and Ammeter which are used to measure voltage and current, respectively. If the connection
Zabbix 6.2
Zabbix 6.2 - More Powerful, Featureful, & Secure
The focus of infrastructure monitoring software company Zabbix has always been on innovation. Over the past 6 versions, the software company has made some necessary big and minor changes in its front end and back end to enhance usability and overall user experience.   Just like the previous versions, Zabbix
Zabbix 6.0 LTS
Zabbix 6.0 LTS – All the Latest Features & Functionalities 
Zabbix is a robust network, virtual machine, cloud service, and server monitoring software built on an open-source environment. The monitoring tool which already has numerous benefits has launched a number of new features and functionalities with its latest version Zabbix 6.0 LTS. The latest version of the network monitoring tool
Salesforce Marketing Cloud
Automate Marketing Initiatives with Salesforce Marketing Cloud 
In today’s era of digitalization, it is imperative to leverage the power of automation in marketing to boost revenue and enhance overall customer satisfaction. In a survey published by Statista, digital marketing automation was found to be the second most effective digital marketing technique (after content marketing) [1]. In fact,
Things You Should Know About Odoo
Things you Need to Know About Odoo ERP System 
Are you considering Odoo as your next ERP system? If yes, this might have raised a few common questions in your mind. Why go for the Odoo ERP system? What benefits does Odoo ERP Offer? Is there a better ERP other than Odoo? Is Odoo customizable? To answer all these

        Success!!

        Keep an eye on your inbox for the PDF, it's on its way!

        If you don't see it in your inbox, don't forget to give your junk folder a quick peek. Just in case. 



            You have successfully subscribed to the newsletter

            There was an error while trying to send your request. Please try again.

            Zehntech will use the information you provide on this form to be in touch with you and to provide updates and marketing.