How to Delete data with fetch request "DELETE" React + Redux

Question

I was trying to delete data/object from my database with fetch delete request method, using React hooks and Redux.

I got stuck and I couldn’t find an answer for my question.

Eventually some how I came across a solution,

Using the question enter link description here

and converting the solution that will fit React Hooks and Redux, I used "useDispatch" instead "mapDispatchToProps"

First you need to import "useDispatch" from react-redux, and your Delete function from actions

import { deleteSet } from './Actions'
import { connect ,useDispatch} from 'react-redux';

Then you can declare dispatch inside your functional component

const dispatch = useDispatch();

The method to call

// take the id of the itme/object you want to delete
const deleteItem = (item) => {
    const itemId = item._id
    console.log(itemId);
// use the dispatch you declared earlier with the function you import from Actions
    dispatch(deleteSet(itemId));
};

The Delete function from "Actions"

export const deleteSet = (id) => (dispatch) =>  {
    fetch(`/api/orders/${id}`, {
      method: "DELETE",
    })
    .then(response => response)
    .then(id => dispatch(
      {
        type: DELETE_ITEM,
        payload: deleteSet(id)
       }
      ))  
    }

This is the reducer

switch (action.type) {
        case DELETE_ITEM:
            return {item: action.payload};
        default:
           return state
    };

This is the server.js I use for this delete function

app.delete("/api/orders/:id", async (req, res) => {
    const order = await Order.findByIdAndDelete(req.params.id);
    res.send(order)
})

---

I hope that this will help you in your journey

If someone have improvements to this post Definitely post it below Thank you and have fun coding