I'm using React and Redux for creating a shop website. I want to add items to the cart using redux, but cart items it's not getting added only showing an error:
GET http://localhost:3000/api/v1/product/61db003374fe4392e3446ae3 404 (Not Found) "Uncaught (in promise) Error: Request failed with status code 404"
and I suppose the problem is maybe with ID in action but I'm not sure how to fix it.
Please help me out. Below is my code
// 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;