Fetch delete request method using react redux is not deleting

Question

i'm trying to use fetch delete request method to delete item in my localhost server using react redux

method to call

 deleteItem(e) {
    e.preventDefault();
    const id = this.props.id;
    this.props.deleteSet(id);
  }

Dispatching the action

const mapDispatchToProps = dispatch => ({
  deleteSet: id => dispatch(deleteSet(id)),
});

Action

export function deleteSetSuccess(id) {
  return {
    type: "DELETE_SET_SUCCESS",
    id,
  };
}

export function deleteSet(data) {
  return (dispatch) => {
    fetch(`${apiUrl}orgs/1/sets/${data}`, {
      method: "DELETE",
      body: JSON.stringify(data),
      headers: new Headers({
        "Content-Type": "application/json",
      }),
    }).then(response => response)
      .then(id => dispatch(deleteSetSuccess(id)));
  };
}

Reducer

export function deleteSetSuccess(state = '', action) {
  switch (action.type) {
    case "DELETE_SET_SUCCESS":
      return action.id;

    default:
      return state;
  }
}

response from the localhost server

DELETE http://localhost:8080/distinction-2.0-alpha2/api/orgs/1/sets/8 400 (Bad Request)

sideshowbarker · Accepted Answer · 2017-08-12 21:45:04Z

1

A valid HTTP DELETE request doesn’t have a request body—and so doesn’t need a Content-Type request header either—but the request code in the question is sending some data as the request body, along with a Content-Type request header. Presumably your server is deciding that’s not a valid DELETE request and so it’s responding with a 400 “Bad Request” to indicate that.

answered Aug 12, 2017 at 21:45

sideshowbarker

89.2k30 gold badges219 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Al-ameen Ak Over a year ago

It works thanks, but it doesn't remove the item instantly, i have to refresh the page before it is gone.

Al-ameen Ak Over a year ago

And there is this issue i encounter, i have a list of components, what i want is when ever i click an edit button on the each components it should take me to a page that has a bunch input where the input value is the this.props waiting for me to edit and save, and i have no idea how to start.

Collectives™ on Stack Overflow

Fetch delete request method using react redux is not deleting

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related