Remove from Cart in React Redux

 

 

 Remove from Cart in React Redux

 

 

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of reducer in redux. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

 

 

React

Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

 

Topic we will cover -

# Make More action and reducers

# Make remove from the cart and empty cart button

# Actions and Reducers for both

# Update cart count in Data in Header component

# Interview Question

MainHeader component

 

First we will make a file, MainHeader.jsx , actually we have already created this file in our previous blog when we will create addtocart button and blog.

 

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/09/get-data-in-component-from-redux.html

 

Let's add the code.

 

 

 

MainHeader.jsx

 

import React from "react";
import { addToCart, removeFromCart, emptyCart } from "../redux/Action";
import { useDispatch } from "react-redux";

function MainHeader() {
  const dispatch = useDispatch();

  const product = {
    name: "Motorola",
    type: "mobile",
    price: 18000,
    color: "silver",
  };

  return (
    <div>
      <div className="max-w-[1240px] mx-auto mt-6 ml-2 grid lg:grid-cols-3">
        <div>
          <button
            className="bg-green-700 text-white p-2"
            onClick={() => dispatch(addToCart(product))}
          >
            Add to Cart
          </button>
        </div>

        <div>
          <button
            className="bg-red-700 text-white p-2"
            onClick={() => dispatch(removeFromCart(product.name))}
          >
            {" "}
            Remove To Cart
          </button>
        </div>

        <div>
          <button
            className="bg-red-700 text-white p-2"
            onClick={() => dispatch(emptyCart())}
          >
            {" "}
            Empty Cart
          </button>
        </div>
      </div>
    </div>
  );
}
//www.kumaratuljaiswal.in    www.hackingtruth.in
export default MainHeader;

 

 

In this code we have added two (2) more buttons like - Remove To Cart and another one is Empty Cart and import them import { addToCart, removeFromCart, emptyCart } from "../redux/Action";

 

Even we have create Action file (Action.jsx) and in this file we write code and export them 

export const removeFromCart = (data) => {
    console.log("action removeFromCart is called", data);
    return {
        type : REMOVE_TO_CART,
        data: data
    }
} 

export const emptyCart = () => {
    console.log("action removeFromCart is called");
    return {
        type : EMPTY_CART,
    }
} 

 

 

 and we have called both name (removeFromCart and emptyCart) of them through dispatch in the MainHeader.jsx file.

 

Action.jsx

 

 

import { ADD_TO_CART, EMPTY_CART, REMOVE_TO_CART } from "./Constant";

export const addToCart = (data) => {
    console.log("action called", data);
    return {
    type: ADD_TO_CART,
    data: data
}
}

export const removeFromCart = (data) => {
    console.log("action removeFromCart is called", data);
    return {
        type : REMOVE_TO_CART,
        data: data
    }
} 

export const emptyCart = () => {
    console.log("action removeFromCart is called");
    return {
        type : EMPTY_CART,
    }
} 

 

 

 And apart from that we also created another file called Constant.jsx and written a code .

Constant.jsx

export const  ADD_TO_CART  = "ADD_TO_CART";
export const  REMOVE_TO_CART  = "REMOVE_TO_CART";
export const  EMPTY_CART  = "EMPTY_CART";

 

 

Reducer.jsx

Now Reducers Time... In this file we have to add switch action type because of when we click on add to cart button , remove to cart, empty cart. All buttons will work differently according to each other.

case REMOVE_TO_CART:
            console.log("REMOVE_FROM_CART condition", action)
            data.length = data.length - 1
            return [ ...data ];
case EMPTY_CART:
            console.log("EMPTY_CART condition", action)
            data = []
            return [ ...data ]

Output

 

 

 

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE

 

Disclaimer