Can't get get product id in react-redux to call django api

I am building a full-stack e-commerce project with react, django and redux-react. I was not having this problem when I used

const [product, useProduct] = useState([])
const {id} = useParams()

but when I implemented redux reducers I changed my ProductScreen.js productScreen function and useEffect like this:

import React, {useState, useEffect} from 'react'
import { Link, useParams } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating'
import { useDispatch, useSelector } from 'react-redux'
import { listProductDetails } from '../actions/productActions'


function ProductScreen() {
  const { id } = useParams();
  const dispatch = useDispatch()
  const productDetails = useSelector(state => state.productDetails)
  const { loading, error, product } = productDetails

  useEffect(() => {
    dispatch(listProductDetails(id))
  }, [])

I have fail, success and loading components in a several file and as constants. this is my product detail reducer:

export const productDetailsReducer = (state={product:[]}, 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

    }
}

and lastly, this is my listProductDetails in productActions.js

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,
        })
    }
}

problems have to be product const in ProductScreen.js and id in listProductDetails in productActions.js

Back to Top