Delete item from MongoDB using React, Redux and Express - reactjs

Question

I'm trying to delete an order line from my MongoDB database using React, Redux and Express/Node but I'm getting the following error in my console:
VM118:1 DELETE http://localhost:3000/api/meals/:id/jp4PaZve3 404 (Not Found)
I'm not sure why it's pointing to port 3000, when my local server is running on 5000?
In my server file, I have the following delete endpoint created in Express
app.delete("/api/meals/:id", async (req, res) => {
const deletedMeal = await Meal.findByIdAndDelete(req.params.id);
res.send(deletedMeal);
});
In my redux actions I have the following (I'm not sure if this is correct):
export const deleteMeal = (id) => async (dispatch) => {
await fetch("/api/meals/:id/" + id, {
method: "DELETE",
});
dispatch({
type: DELETE_MEAL,
payload: id,
});
};
My UpdateMenu screen is as follows:
import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMeals, deleteMeal } from "../actions/mealActions";
class UpdateMenuScreen extends Component {
constructor(props) {
super(props);
this.state = {
meal: null,
};
}
componentDidMount() {
this.props.fetchMeals();
}
deleteMeal(id) {
this.props.deleteMeal(id);
}
render() {
return (
<div>
<h3>Current Menu</h3>
{!this.props.meals ? (
<div>Loading...</div>
) : (
<ul className="meals">
{this.props.meals.map((meal) => (
<li key={meal._id}>
<div className="meal">
<p>{meal.title}</p>
<button
className="button"
onClick={() => this.props.deleteMeal(meal._id)}
>
Delete
</button>
</div>
</li>
))}
</ul>
)}
<button>Add New Menu Item</button>
</div>
);
}
}
export default connect((state) => ({ meals: state.meals.items }), {
fetchMeals,
deleteMeal,
})(UpdateMenuScreen);
When I try and run my delete method in Postman however, it doesn't work. Can anyone see what I'm doing wrong?

Answer 1

In your deleteMeal action, you have to put the id in the URL dynamically with template strings,
await fetch("/api/meals/:id/" + id
1) it's equal to /api/meals/:id/id but according to your backend it should be /api/meals/:id
2) and you have to put the whole URL like http://localhost:5000/api/meals/${id} cause if you don't put the base, it will do a request on the port of your client so 3000
///////
So instead of :
export const deleteMeal = (id) => async (dispatch) => {
await fetch("/api/meals/:id/" + id, {
method: "DELETE",
});
dispatch({
type: DELETE_MEAL,
payload: id,
});
};
try this :
export const deleteMeal = (id) => async (dispatch) => {
await fetch(`http://localhost:5000/api/meals/${id}/`, {
method: "DELETE",
});
dispatch({
type: DELETE_MEAL,
payload: id,
});
};