Product Listing on the e-commerce page using Redux

Product Listing on the e-commerce page using Redux

In an eCommerce application, a product listing page typically displays a list of products available for purchase. Here's a simplified example of how you might structure the components using React and Redux for state management. This example assumes you've already set up your Redux store and actions:

  1. Product Component:
// Product.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { addToCart } from './actions';

const Product = ({ product }) => {
  const dispatch = useDispatch();

  const handleAddToCart = () => {
    dispatch(addToCart(product));
  };

  return (
    <div className="product">
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
      <button onClick={handleAddToCart}>Add to Cart</button>
    </div>
  );
};

export default Product;
  1. ProductList Component:
// ProductList.js
import React from 'react';
import { useSelector } from 'react-redux';
import Product from './Product';

const ProductList = () => {
  const products = useSelector((state) => state.products);

  return (
    <div className="product-list">
      <h2>Product Listing</h2>
      {products.map((product) => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
};

export default ProductList;
  1. Redux Actions and Reducer:
// actions.js
export const addToCart = (product) => ({
  type: 'ADD_TO_CART',
  payload: product,
});

// reducers.js
const initialState = {
  products: [
    { id: 1, name: 'Product A', description: 'Description A', price: 20 },
    { id: 2, name: 'Product B', description: 'Description B', price: 25 },
    // Add more products as needed
  ],
  cartItems: [],
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload],
      };
    default:
      return state;
  }
};

export default rootReducer;
  1. Main App Component:
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import ProductList from './ProductList';

const store = createStore(rootReducer);

const App = () => {
  return (
    <Provider store={store}>
      <div className="app">
        <h1>E-Commerce App</h1>
        <ProductList />
      </div>
    </Provider>
  );
};

export default App;

In this example, the Product component shows a single product, and the ProductList component shows a group of products. When you click the "Add to Cart" button, it sends the addToCart action, changing the state in the Redux store. The ProductList component uses the useSelector hook to get the product list from the store.

Don't forget to change this example to match your needs and style choices. You might also need to deal with more complicated situations, like getting product data asynchronously or managing product detail pages.