Product Screen is not showing up product on React, Django code

Im writing a shop using React + Django. After using Redux , the Product screen is giving an error.

Request failed with status code 500

enter image description here

This is the error which i wrote in the codeblock.

However, it should look like this when i choose a product:

enter image description here

The HomeScreen looks like this:

enter image description here

My code blocks:

ProductActions:

`

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('/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,
        })

    }

 }


 export const listProductDetails = (id) => async(dispatch) => {
    try {
        dispatch({type:PRODUCT_DETAILS_REQUEST})

        const { data } = await axios.get('/api/products/${id}')
        dispatch({
            type:PRODUCT_DETAILS_SUCCESS,
            payload:data

        })


    } catch (error) {
        dispatch({
            type:PRODUCT_DETAILS_FAIL,
            payload:error.response && error.response.data.message
                ? error.response.data.message
                : error.message,
        })

    }

 }
```
**ProductReducers:**


```
import { 
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL,

    PRODUCT_DETAILS_REQUEST,
    PRODUCT_DETAILS_SUCCESS,
    PRODUCT_DETAILS_FAIL,

 } from '../constants/productConstants'


export const productListReducer = (state = { products: [] },action ) => {
    switch(action.type) {
        case PRODUCT_LIST_REQUEST:
            return {loading: true,products: [] }
        
        case PRODUCT_LIST_SUCCESS:
            return {loading:false,products:action.payload}
        
        case PRODUCT_LIST_FAIL:
            return {loading:false,error:action.payload}    
            
        default:
            return state    
    }

}





export const productDetailsReducer = (state=  {product:{reviews:[] }},action) => {
    switch(action.type) {
        case PRODUCT_DETAILS_REQUEST:
            return { loading : true, ...state }
        
        case PRODUCT_DETAILS_SUCCESS:
            return { loading:false, product:action.payload}
        
        case PRODUCT_DETAILS_FAIL:
            return { loading:false,error:action.payload}    
             
        default:
            return state    
    }

}```



**ProductConstants:**




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



export const PRODUCT_DETAILS_REQUEST = 'PRODUCT_DETAILS_REQUEST'
export const PRODUCT_DETAILS_SUCCESS = 'PRODUCT_DETAILS_SUCCESS'
export const PRODUCT_DETAILS_FAIL = 'PRODUCT_DETAILS_FAIL'
```


**Store:**


```
import { legacy_createStore as createStore ,combineReducers,applyMiddleware} from 'redux';
import {thunk} from 'redux-thunk';
import { composeWithDevTools } from '@redux-devtools/extension';
import { productListReducer,productDetailsReducer } from './reducers/productReducers'

const reducer = combineReducers({
    productList:productListReducer,
    productDetails:productDetailsReducer,
})

const initialState= {}

const middleware = [thunk]
const store=createStore(reducer,initialState,
    composeWithDevTools(applyMiddleware(...middleware)))

export default store

```


**HomeScreen:**


```
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
```

Back to Top