Не удается получить id продукта в react-redux для вызова django api

Я создаю полнофункциональный проект электронной коммерции с react, django и redux-react. У меня не было этой проблемы, когда я использовал

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

но когда я внедрил redux reducers я изменил свою ProductScreen.js функцию productScreen и useEffect следующим образом:

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

У меня есть fail, success и загрузка компонентов в нескольких файлах и как константы. это мой редуктор деталей продукта :

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

    }
}

и, наконец, это мой listProductDetails в 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,
        })
    }
}

проблемы должны быть product const в ProductScreen.js и id в listProductDetails в productActions.js

Вернуться на верх