atlp-rwanda / knights-ecomm-fe / 9707761100

import React, { useEffect } from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { RootState, AppDispatch } from '../redux/store';

import { fetchProducts } from '../redux/actions/productAction';

const ProductList: React.FC = () => {

  const dispatch = useDispatch<AppDispatch>();

  const { products, loading, error } = useSelector((state: RootState) => state.products);

  useEffect(() => {

    dispatch(fetchProducts());

  }, [dispatch]);

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error: {error}</p>;

  return <ul>{products?.data?.products?.map((product) => <li key={product.id}>{product.name}</li>)}</ul>;

};

export default ProductList;