Estoy usando React y Redux para crear un sitio web de tienda. Quiero agregar elementos al carrito usando redux, pero los elementos del carrito no se agregan, solo muestran un error:

GET http://localhost:3000/api/v1/product/61db003374fe4392e3446ae3 404 (No encontrado) "Error no detectado (en promesa): la solicitud falló con el código de estado 404"

y supongo que el problema es tal vez con ID en acción, pero no estoy seguro de cómo solucionarlo.

Por favor, ayúdame. A continuación se muestra mi código

 // reducer import { ADD_TO_CART } from '../constants/cartConstants'; export const cartReducer = (state = { cartItems: [] }, action) => { switch (action.type) { case ADD_TO_CART: const item = action.payload; const isItemExist = state.cartItems.find( (i) => i.product === item.product ); if (isItemExist) { return { ...state, cartItems: state.cartItems.map((i) => i.product === isItemExist.product ? item : i ), }; } else { return { ...state, cartItems: [...state.cartItems, item], }; } default: return state; } };

 // actions import axios from 'axios'; import { ADD_TO_CART } from '../constants/cartConstants'; export const addItemToCart = (id, quantity) => async (dispatch, getState) => { const { data } = await axios.get(`/api/v1/product/${id}`); dispatch({ type: ADD_TO_CART, payload: { product: data.product._id, name: data.product.name, price: data.product.price, image: data.product.images[0].url, stock: data.product.stock, quantity, }, }); localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems)); };

 // store import { createStore, combineReducers, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { composeWithDevTools } from 'redux-devtools-extension'; import { productsReducer, productsDetailsReducer, } from './reducers/productReducers'; import { authReducer, userReducer, forgotPasswordReducer, } from './reducers/userReducers'; import { cartReducer } from './reducers/cartReducers'; const reducer = combineReducers({ products: productsReducer, productDetails: productsDetailsReducer, auth: authReducer, user: userReducer, forgotPassword: forgotPasswordReducer, cart: cartReducer, }); let initialState = { cart: { cartItems: localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : [], }, }; const middleware = [thunk]; const store = createStore( reducer, initialState, composeWithDevTools(applyMiddleware(...middleware)) ); export default store;