Add Routing and Make Cart Page

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of react routing in redux saga and set result. 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

Topic we will cover -

# Install React router dom

# Make Main and cart page

# Add Link with pages

# Add Style for Header and Logo

# Interview Question

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

 Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

React-Router-Dom Installation

We will install react-router-dom (https://reactrouter.com) by this command (npm i react-router-dom or npm install react-router-dom)  after installing we have a wrapper which is used to wrapping the entire website for routing becuase when we want route in any page of website we can easily redirect the page in any one of them website without Loading the entire website.

Now Wrapping time... we will use wrapping in Main.js or Index.js file. Here we import BrowserRouter form react-router-dom

import { BrowserRouter } from 'react-router-dom'


<BrowserRouter>
    <App />
    </BrowserRouter>

Whole Code

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'

import Store from './redux/Store.jsx'
import { BrowserRouter } from 'react-router-dom'

//www.kumaratuljaiswal.in www.hackingtruth.in

console.log(Store)

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={Store}>
  <BrowserRouter>
    <App />
    </BrowserRouter>
    </Provider>
)

Now we are ready to implement routing in our code. Here we import Routes and Route from react-router-dom and using route tag we define a path where we want redirect the page and in element we define the component.

import { Routes, Route } from "react-router-dom";

 
<Routes>
  <Route path="/" element={<MainHeader />} />
  <Route path="/cart" element={<Cart />} />
</Routes>
 

Simply make a page (Cart.js) component and put it into with routes for the page redirecting.

1. Import the Routes and Route and useNavigate from react-router-dom.

2. make a navigate with const.

3. simple create a text for redirecting back to Home Page. 

import React from "react";
 
import { Routes, Route, useNavigate } from "react-router-dom";

function Cart() {

    const navigate = useNavigate()
  return (
    <div>
       <div className="text-center mx-auto max-w-[1240px] ">
       <h1 className="text-blue uppercase underline font-bold first-letter:text-[red] pb-4 pt-4 cursor-pointer" onClick={() => navigate('/')}>Product List</h1>
        <h1>Cart Page</h1>
       </div>
    </div>
  );
}

export default Cart;

Now Cart.jsx component put with route in App.jsx.

import React from "react";
import Header from "./components/Header";
import MainHeader from "./components/MainHeader";
import { Routes, Route } from "react-router-dom";
import Cart from "./components/Cart";

function App() {
  return (
    <div>
      <>
        <Header />
        {/* <MainHeader /> */}

        <Routes>
          <Route path="/" element={<MainHeader />} />
          <Route path="/cart" element={<Cart />} />
        </Routes>
      </>
    </div>
  );
}

export default App;

# 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 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE    

Disclaimer

Remove to Cart with ID

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Remove to cart with ID in redux saga and set result. 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

Topic we will cover -

# Apply Filter function in Reducer

# Test Added Products in Cart

# Interview Questions

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

 Reducer.jsx

 case REMOVE_TO_CART:
           
            console.log("REMOVE_FROM_CART condition", action)
            const remainingItem = data.filter((item) => item.id !== action.data);
            console.log("RemainingItem", remainingItem)
            return [ ...remainingItem ];

 Simple open Reducer.jsx and put a new case REMOVE_TO_CART and apply filter function with condition.

Full Code

import { ADD_TO_CART, EMPTY_CART, REMOVE_TO_CART } from './Constant';
export const cartData = (data = [], action) => {
    switch(action.type)
    {
        case ADD_TO_CART:
            console.log("ADD_TO_CART CONDITION", action)
            return [action.data,  ...data];
        case REMOVE_TO_CART:
            console.log("REMOVE_FROM_CART condition", action)
            const remainingItem = data.filter((item) => item.id !== action.data);
            console.log("RemainingItem", remainingItem)
            return [ ...remainingItem ];
        case EMPTY_CART:
            console.log("EMPTY_CART condition", action)
            data = []
            return [ ...data ]
        default:
            return data;
    }
}
//www.kumaratuljaiswal.in #www.hackingtruth.in

OutPut

RemainingItem Array [ {…}, {…} ]
​
0: Object { id: 4, name: "Vivo T2x 5G", color: "blue", … }
​
1: Object { id: 1, name: "IQOO Z7 Pro 5G", color: "blue", … }
​
length: 2
​
<prototype>: Array []

# 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 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE   

Disclaimer

Product list ui with API data

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Call API with redux saga and set result. 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

Topic we will cover -

# Show Product in UI

# Add style to Product UI

# Load Product when page Load

# Add cart and remove Cart UI with API Data

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Show Product in UI (MainHeader.jsx)

      <div className=" max-w-[1440px] mx-auto grid grid-cols-4   gap-6 mt-8">
        {data.map((item) => {
          //console.log("data through map function", data);
          return (
            <div  key={item.id} className="text-center shadow-xl p-4 border">
              <div>
                <img src={item.photo} alt="" />
              </div>
      
              <div>Name : {item.name} </div>

              <div>Color : {item.price} </div>
              <div>Brand : {item.brand} </div>
              <div>Price : {item.price} </div>
              <div>Category : {item.category} </div>
              <div className=" flex justify-around mt-2 ">
              <button className="p-1 border bg-slate-400">Add To Cart</button>
              <button className="p-1 border bg-gray-400">Remove From Cart</button>
              </div>
            </div>
          );
        })}
      </div>

 Let's go through the key parts:

1. The outermost <div>: This div contains a grid of items. It uses Tailwind CSS classes for styling, such as max-w-[1440px] to set the maximum width to 1440 pixels, mx-auto to center it horizontally, and grid grid-cols-4 to create a grid with four columns. The gap-6 adds a gap of 6 units between grid items, and mt-8 adds margin-top of 8 units.


2. {data.map((item) => { ... })}: This is a JavaScript expression using the map function to iterate over an array called data. For each item in the array, it generates a block of JSX code.


3. <div key={item.id} className="text-center shadow-xl p-4 border">: Each item is represented by a <div> with a key attribute set to the item's unique id. It has several Tailwind CSS classes for styling, such as text-center for centering text, shadow-xl for a large shadow, p-4 for padding, and border for a border.


4. <img src={item.photo} alt="" />: Displays an image using the src attribute from the item's photo property.


5. <div>Name: {item.name}</div>, <div>Color: {item.color}</div>, etc.: Displays various information about the item, such as name, color, brand, price, and category.


6. The last <div className="flex justify-around mt-2"> contains two buttons. One with the text "Add To Cart" and the other with "Remove From Cart." They are styled with Tailwind CSS classes for spacing and background color.

In summary, this component is designed to display a grid of items, each with an image, name, color, brand, price, category, and buttons for adding and removing items from the cart. The styling is done using Tailwind CSS classes.

But there is some problem so when we click on Get product list Button then this goes appear on page but we don't want this types. So, how to fix this...

simple use useEffect hooks with dispatch -

    useEffect(() => {
      dispatch(productList())
    }, []);

 Now when we load our page this goes appear.

Full Code

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

import { useSelector } from "react-redux";


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

  const data = useSelector((state) => state.productData);
  console.log("data in main component from saga", data);

  

    useEffect(() => {
      dispatch(productList())
    }, []);

  return (
    <div>
      <div className="max-w-[1240px] mx-auto mt-6 ml-2 grid lg:grid-cols-4">
         
        <div>
          <button
            className="bg-red-700 text-white p-2"
            onClick={() => dispatch(emptyCart())}
          >
            {" "}
            Empty Cart
          </button>
        </div>
        
         
      </div>


      <div className=" max-w-[1440px] mx-auto grid grid-cols-4   gap-6 mt-8">
        {data.map((item) => {
         
          return (
            <div  key={item.id} className="text-center shadow-xl p-4 border">
              <div>
                <img src={item.photo} alt="" />
              </div>
      
              <div>Name : {item.name} </div>

              <div>Color : {item.price} </div>
              <div>Brand : {item.brand} </div>
              <div>Price : {item.price} </div>
              <div>Category : {item.category} </div>
              <div className=" flex justify-around mt-2 ">
              <button onClick={() => dispatch(addToCart(item))} className="p-1 border bg-slate-400">Add To Cart</button>
              <button onClick={() => dispatch(removeFromCart(item.id))} className="p-1 border bg-gray-400">Remove From Cart</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
//www.kumaratuljaiswal.in    www.hackingtruth.in
export default MainHeader;

# 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 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE   

Disclaimer

Call API with Saga and Set Result

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Call API with redux saga and set result. 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

Topic we will cover -

# Call Saga function from Action

# Make function in Saga for API

# Send Result from Saga to Action

# Pass data to Reducer

# Get data in Main Component

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Call Saga function from Action

We have already discussed about generator function in javascript ( CLICK HERE FOR MORE INFO ). In this file ( ProductSaga.jsx ) we will import takeEvery function from "redux-saga/effects" with using yield .

ProductSaga.jsx

import { takeEvery } from 'redux-saga/effects';
import {PRODUCT_LIST} from './Constant';

function* getProducts(){
    console.log("API CALL DONE")
}


function* ProductSaga() {
 yield takeEvery(PRODUCT_LIST, getProducts)
}

export default ProductSaga

ProductAction.jsx

import { PRODUCT_LIST } from "./Constant";

export const productList =  () =>  {
    
    return {
        type: PRODUCT_LIST,
        data: 'hackingtruth.in'
    }
}

 Here when call ***productList*** action, there is generator type like from ProductAction.jsx file return type (type:PRODUCT_LIST) and then calling done from ProductSaga.jsx file with the help of productSaga() function and then inside this takeEvery function, call getProducts Function so after that overall lastly call getProducts() function and call API.

API Calling

function* getProducts(){
    //console.log("API CALL DONE")
     let data = yield fetch(`http://localhost:3000/products`);
     data = yield data.json();
     console.log("action is called", data)
}

with this command (json-server product.json) in cmd prompt you can run json server.

 As you can see there is six product listing by calling when we click on Get Product List button.

 Now we will get move from ProductAction TO ProductSaga TO ProductReducer File

ProductReducer.jsx

import {SET_PRODUCT_LIST } from './Constant';

export const productData = (data = [], action) => {
    switch(action.type)
    {
        
        case SET_PRODUCT_LIST:
            console.log("SET_PRODUCT_LIST CONDITION", action)
            return [ ...action.data];
        default:
            return data;
    }
}
//www.kumaratuljaiswal.in #www.hackingtruth.in

Full Code (ProductSaga.jsx)

import { takeEvery, put } from 'redux-saga/effects';
import {ADD_TO_CART, PRODUCT_LIST, SET_PRODUCT_LIST} from './Constant';

function* getProducts(){
   
     let data = yield fetch(`http://localhost:3000/products`);
     data = yield data.json();
     yield put({ type: SET_PRODUCT_LIST, data})
      
} 

function* ProductSaga() {
 yield takeEvery(PRODUCT_LIST, getProducts)
 
}

export default ProductSaga

Full Code (ProductAction.jsx)

import { PRODUCT_LIST } from "./Constant";
 
    export const productList =  () =>  {
 
    return {
        type: PRODUCT_LIST,
       
    }
}

Full Code (ProductReducer.jsx)

import { PRODUCT_LIST, SET_PRODUCT_LIST } from './Constant';

export const productData = (data = [], action) => {
    switch(action.type)
    {
        
        case SET_PRODUCT_LIST:
            console.log("SET_PRODUCT_LIST CONDITION", action)
            return [ ...action.data];
        default:
            return data;
    }
}
//www.kumaratuljaiswal.in #www.hackingtruth.in

# 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 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE  

Disclaimer

Configure Saga Middleware in React Redux Saga

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of configure saga middleware in react 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

Topic we will cover -

# Make Saga file and write saga basic function

# Register saga middleware with Store

# Check Flow

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Saga Install

First you need to install redux-saga, for this command ( npm i redux-saga ) 

Make Saga file and write saga basic function

 First we will make a new file called as ProductSaga.jsx and in this file we will used generator function like (function* product)

In JavaScript, a generator function is a special type of function that allows you to control the execution flow using the yield keyword. When a generator function is called, it doesn't execute its code immediately. Instead, it returns an iterator called a generator object.

function* myGenerator() {
    yield 1;
    yield 2;
    yield 3;
  }
  
 const generatorObject = myGenerator();
  
  console.log(generatorObject.next()); // { value: 1, done: false }
  console.log(generatorObject.next()); // { value: 2, done: false }
  console.log(generatorObject.next()); // { value: 3, done: false }
  console.log(generatorObject.next()); // { value: undefined, done: true }
  
  export default ProductSaga;

 In this example, myGenerator is a generator function that yields three values (1, 2, and 3). When you call myGenerator(), it returns a generator object. You can then use the next() method on the generator object to advance the execution of the generator function. The yield keyword is used to produce a value from the generator and temporarily pause its execution.

The next() method returns an object with two properties:

    value: The yielded value.
    done: A boolean indicating whether the generator function has completed.

You can use generator functions for more complex asynchronous control flow using yield with promises, making them useful for handling asynchronous code in a more synchronous-looking fashion.

 ProductSaga.jsx

MiddleWare Saga Configuration (Store.jsx)

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

import ProductSaga from './ProductSaga';
import createSagaMiddleware from 'redux-saga';


const sagaMiddleware = createSagaMiddleware();

const Store = configureStore(
    {
        reducer: RootReducer,
        middleware: () => [sagaMiddleware]
    }
)

sagaMiddleware.run(ProductSaga)
export default Store

//www.kumaratuljaiswal.in #www.hackingtruth.in

1. import Statement

import { configureStore } from "@reduxjs/toolkit";
import RootReducer from "./RootReducer";
import ProductSaga from './ProductSaga';
import createSagaMiddleware from 'redux-saga';

$ The code imports the configureStore function from @reduxjs/toolkit, which is a set of tools and abstractions built on top of Redux to simplify the development of Redux applications.

$ RootReducer is assumed to be the combined reducer for your application, combining all the reducers using the combineReducers function.

$ ProductSaga is assumed to be a saga that handles asynchronous actions related to products.
    createSagaMiddleware is used to create the middleware for integrating Redux Saga with the Redux store.

2. Create Saga Middleware:

const sagaMiddleware = createSagaMiddleware();


$ This line creates an instance of the Saga middleware using createSagaMiddleware().

3. Configure Redux Store:

const Store = configureStore(
    {
        reducer: RootReducer,
        middleware: () => [sagaMiddleware]
    }
);


$ The configureStore function is called to create the Redux store.

$ It takes an object as an argument with two properties:

reducer: This is the root reducer for the Redux store, combining all the reducers.

middleware: An array of middleware functions to be applied to the store. In this case, it includes the Saga middleware created earlier.



4. Run Saga Middleware:

sagaMiddleware.run(ProductSaga);


$ This line runs the ProductSaga using the Saga middleware. It starts the execution of the saga and allows it to listen for dispatched actions.



5. Export the Store:

export default Store;


$ Finally, the configured Redux store is exported, making it available for use in other parts of your application.

# 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 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

Disclaimer

Add Redux Toolkit in React Redux Saga

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of redux toolkit. 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

Topic we will cover -

# Make Action and Reducer in New File

# Add Redux Toolkit

# Why we need saga Live Example

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Make Action and Reducer in New File

First we will make a file, ProductAction.jsx , in this file we will add product listing so our return type is PRODUCT_LIST and add in constant file.

Let's add the code.

import { PRODUCT_LIST } from "./Constant";

export const productList = () =>  {
    let data = "hello atul"
    console.log("product listing action is called", data)
    return {
        type: PRODUCT_LIST,
        data
    }
}

Constant.jsx

export const PRODUCT_LIST = "PRODUCT_LIST";

Make Reducer in New File

ProductReducer.jsx - Now we will make a file, ProductReducer.jsx , in this file we will add case whenever user click on some action so trigger the case.

import { PRODUCT_LIST } from './Constant';

export const productData = (data = [], action) => {
    switch(action.type)
    {
        case PRODUCT_LIST:
            console.log("PRODUCT_LIST CONDITION", action)
            return [action.data];
        default:
            return data;
    }
}
//www.kumaratuljaiswal.in #www.hackingtruth.in

Register or add the reducer in RootReducer.jsx file

import { combineReducers } from 'redux'
import { cartData } from './Reducer'
import { productData } from './ProductReducer';

export default combineReducers({ 
    cartData,
    productData 

})

//www.kumaratuljaiswal.in www.hackingtruth.in

Still are you in trouble or confused how we add the extra code like combineReducers, cartData, etc, etc, so please visit these below links that we have provided.

MainHeader.jsx

Here, we have to import productList from productAction.jsx and adding a button that when user click on it then product listing showing.... 

import { productList } from '../redux/ProductAction';

 <div>
           <button
            className="bg-red-700 text-white p-2"
            onClick={() => dispatch(productList())}
          >
            {" "}
            Get Product List
           </button>
         </div>

If we want the result in same page (MainHeader.jsx) when user click on Get Product List button. Suppose that we have already filled the data in the cart section.

Here we are getting the data of all the products which we have registered in the RootReducer.jsx file

Like

 cartData,
    productData 

import { productList } from '../redux/ProductAction';


  const data = useSelector((state) => state);
  console.log("data in main component", data);

But if we want only product listing's data then we have to add in state...

state.productData  and in action we have defined static data thats why we got a static data like hello atul.

Full Code (MainHeader.jsx)

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

import { useSelector } from "react-redux";


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

  const data = useSelector((state) => state.productData);
  console.log("data in main component", data);

  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-4">
        <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>
          <button
            className="bg-red-700 text-white p-2"
            onClick={() => dispatch(productList())}
          >
            {" "}
           Get Product List
          </button>
        </div>

      </div>
    </div>
  );
}
//www.kumaratuljaiswal.in    www.hackingtruth.in
export default MainHeader;

Add Redux Toolkit

We are installing redux toolkit and using this toolkit (RTK) because createStore( ) in Store.jsx file has been removed in redux.

Store.jsx

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


const Store = configureStore({reducer: RootReducer})

export default Store

//www.kumaratuljaiswal.in #www.hackingtruth.in

API Calling (ProductAction.jsx)

Public API (you can also use this) - http://jsonplaceholder.typicode.com/todos/1

import { PRODUCT_LIST } from "./Constant";

export const productList = async () =>  {
    //let data = "hello atul"
    let data = await fetch("http://jsonplaceholder.typicode.com/todos/1");
    data = await data.json()
    console.log("product listing action is called", data)
    return {
        type: PRODUCT_LIST,
        data
    }
}

But we got some error - Actions must be plain objects. Instead, the actual type was: 'Promise'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. 

Middleware only two - saga or redux-thunk but we will use saga (it is easy) in the next blog.

# 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 

# Remove from cart - CLICK HERE

Disclaimer

 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

Topic we will cover -

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