Product list ui with API data in react redux saga

 

 

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

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 -

# 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/09/get-data-in-component-from-redux.html

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