2

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
  • 81,827
  • 26
  • 193
  • 197
Al-ameen Ak
  • 23
  • 1
  • 5

1 Answers1

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.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
  • It works thanks, but it doesn't remove the item instantly, i have to refresh the page before it is gone. – Al-ameen Ak Aug 13 '17 at 11:45
  • 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. – Al-ameen Ak Aug 14 '17 at 17:12