How to Use Redux in a Project

Importance of Redux

As we know, at the time of project creation, every developer faces the problem of passing the data from one component to another. If you are using React for project development, then we have some options to pass the data from one component to another which are the following:

1. Props drilling
2. Context API
3. Redux

In props drilling, one issue is that we can pass the data from parent to child, but we can’t pass it from child to parent. For that reason, we can use other tools and libraries for that; in this blog, we’ll discuss Redux.

What Is Redux?

Redux is a javascript library that we use for centralized state management. In the redux library, there are three components or functions that are used to handle the state of a project.

Action

The action is responsible for what operation is needed in the project; the action is responsible for all kinds of operations that need to be performed like add, update, or delete operations. The action is specially used to differentiate the action that we need to perform.

Reducers

The reducer is a mediator between the data action and the store; after taking the action details from the action, the reducer is responsible for performing an action on the store. For the performing action, one function is particularly famous: useDisptach ().

Store

Store will store all the states related to your project where you can add, update, or delete any state according to your requirements.

Store is the main component of the Redux library where all states have been stored after the performing action.

How to Install Redux?

You can visit the official page of the redux library.

Steps you need to follow for installation.

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit.

And you need to install the Redux core library in your existing project.

# NPM
npm install redux

# Yarn
yarn add redux

How to Create an Action File in Your Project?

import { Employee_Info  , Remove_employee_info} from "./constant";

export function addEmployeeInfo(item) {
    return {
        type : Employee_Info,
        data : item 
    }
}
export function removeEmployeeInfo(item) {
    return {
        type : Remove_employee_info,
        data : item 
    }
}

This file is for to perform an action on the store; the user can add, delete, or perform any CRUD operation using this action file.

How to Create a Reducer File?

The reducer file is responsible for logical implementation according to the action file.

import { Employee_Info ,Remove_employee_info } from "./constant";
const  initialState= [];

export const reducer =(state=initialState, action) =>{
    switch(action.type){
        case Employee_Info  : 
            return [
                ...state ,
                action.data
            ]
        case Remove_employee_info :
            let result = state.filter(item=>{
                return item._id!=action.data;
            })

            return [...result];
        
        default : 
         return state;
    }
}

Configuration of Store?

This is the configuration of the store where all states related to the project store are here.

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";

export const store = configureStore({
    reducer : rootReducer
})

What Is Constant File?

Constant file is responsible for where all kinds of operations are mentioned.

export const Employee_Info = "employee_info";
export const Remove_employee_info = "remove_emp_info"

Why Are We Using combineReducer?

The combineReducer will provide a single object for all states.

import { combineReducers } from "redux";
import { reducer } from "./reducer";

export default combineReducers({
    reducer
})

Redux is the most efficient way to handle the state in a project; this library will resolve your state-related issues like child-to-parent and parent-to-child data passing.

You can use Redux in your ReactJS, React Native, Angular, and VuejS projects. It is compatible with all libraries and frameworks.