I'm try to send a request to the server

Question

But there is no request to the server. Is there any mistakes in this code?

    import React, { useState, useEffect } from 'react';
    import { Link } from 'react-router-dom'
    import axios from 'axios';
    import { useSelector, useDispatch } from 'react-redux';
    import { listProducts } from '../actions/productActions';

    function HomeScreen(props) { 
        const productList = useSelector(state => state.productList);
        const { products, loading, error } = productList;
        const dispatch = useDispatch();
        
        useEffect(() => {
            const fetchData = async () =>{
                dispatch(listProducts());
            }
            return () =>{
                //
            };
        }, []) 

        return loading ? <div>Loading...</div> : 
            error ? <div>{error}</div> :
        
        <ul className="products">
        {
            products.map(product =>
        <li key={product._id}>
                <div className="product">
                <Link to={'/product/' + product._id}>  
                    <img className="product-image" src={product.image} alt="product"/>
                    </Link>
                    <div className="product-name">
                        <Link to= {'/product/' + product._id}> {product.name} </Link>
                        </div>
                    <div className="product-brand">{product.brand}</div>
                    <div className="product-price">Rs.{product.price}</div>  
                    <div className="product-rating">{product.rating} Stars ({product.numReivews}Reviews)</div>
                </div>
            </li>) 
        }
                
        </ul>
    
    }

    export default HomeScreen;

As you see in following screenshot, there is no request to the server.Does anyone have idea about this matter?

Answer 1

You're not calling the fetchData() function. Instead you've only declared it inside useEffect.

So instead of

        useEffect(() => {
            const fetchData = async () =>{
                dispatch(listProducts());
            };
            return () =>{
                //
            };
        }, []) 

you can just write

        useEffect(() => {
            dispatch(listProducts());
            return () =>{
                //
            };
        }, []) 

This might not be the full solution as, for example, I don't know what listProducts() does but certainly it is a part of the solution.