Error: Cannot read properties of undefined (reading 'get')

Question

I have this error on HomeScreen of my project
I want to perform actions on the state of my HomeScreen Page using redux. The data is provided from the api (array of items) then it is rendered on the screen. After All this on page of my website it says the above error.
productReducer.js

import { 
PRODUCT_LIST_REQUEST,
PRODUCT_LIST_SUCCESS,
PRODUCT_LIST_FAIL,

PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS,
PRODUCT_DETAILS_FAIL,


} from '../constants/productConstants'

export const productListReducers=(state= { products:[] },action)=>{
    switch(action.type)
    {
        case PRODUCT_LIST_REQUEST:
            return { loading:true, products:[]}

        case PRODUCT_LIST_SUCCESS:
            return {loading:false, products:action.payload.products}

        case PRODUCT_LIST_FAIL:
            return {loading:false,error:action.payload}

        default:
            return state
    }

}

productAction.js

import { axios } from 'axios'
import { 
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL,

    PRODUCT_DETAILS_REQUEST,
    PRODUCT_DETAILS_SUCCESS,
    PRODUCT_DETAILS_FAIL 
} from '../constants/productConstants'

export const listProducts=()=>async(dispatch)=>{ 
    try
    {
        dispatch({type:PRODUCT_LIST_REQUEST})
        const { data }= await axios.get('http://127.0.0.1:8000/api/products/')
        dispatch({
            type:PRODUCT_LIST_SUCCESS,
            payload:data
        })
    }
    catch(error){
        dispatch({
            type:PRODUCT_LIST_FAIL,
            payload:error.response && error.response.data.message ? error.response.data.message: error.message,
        })
    }

}

HomeScreen.js

import React, {useState, useEffect} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col } from 'react-bootstrap'
import Product from '../components/Product'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { listProducts } from '../actions/productActions'

function HomeScreen() {
    
    const dispatch = useDispatch()
    const productList=useSelector(state=>state.productList)
    const { error, loading, products}=productList
    
    useEffect(()=>{
        
         dispatch(listProducts())  
    },[dispatch])
   
    return (
        <div>
            <h1>Latest Products</h1> 
            {loading ? <Loader /> 
                : error ?  <Message variant='danger'>{error}</Message> 
                : 
                (
                    <Row>
                        {products.map(product=>(
                            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                                <Product product={product}/>
                            </Col>
                        ))}
                    </Row>
                )
                
            }          
            
        </div>
    )
}

export default HomeScreen

productConstant.js

export const PRODUCT_LIST_REQUEST='PRODUCT_LIST_REQUEST'
export const PRODUCT_LIST_SUCCESS='PRODUCT_LIST_SUCCESS'
export const PRODUCT_LIST_FAIL='PRODUCT_LIST_FAIL'

Answer 1

You need to change the import axios code and import it like this

import axios from 'axios'

instead of

import { axios } from 'axios'