React/Redux : Json-server unable to delete from db

Question

I am using json-server and build a fake JSON server to work with the react-redux app. I am working on delete method. Here is action

//Delete Employee
export const deleteEmployee = employeeId => dispatch => {
  axios
    .delete(`http://localhost:3004/employees?employeeId=${employeeId}`, {
      headers: {
        "Content-Type": "application/json"
      }
    })
    .then(
      dispatch({
        type: DELETE_EMPLOYEE,
        payload: employeeId
      })
    )
    .catch(err => console.log(err));
};

Here is the db.json

[{
  "name": "Joshua Fluke",
  "title": "Designer",
  "funFact": "This is my test app to test the delete functionality of the app",
  "image": "http://placeholder.pics/svg/300x200/333333",
  "employeeId": "12341234",
  "dateOfJoining": "12/10/2016",
  "id": 7
}]

Here is my delete reducer

case DELETE_EMPLOYEE:
  return {
    ...state,
    employees: state.employees.filter(
      employee => employee.employeeId !== action.payload
    ),
    loading: false
  };

So delete is working fine visually as in when I click on the delete button it deletes the html but it does not delete the entry from db.json. How can I delete an entry in db.json of json-server.

did you see what happens in console (network request) ? And in controller on your backend — Mirko Acimovic
– Mirko Acimovic, Commented Jun 11, 2018 at 2:49
Yes its a 404 response. But it deletes the item form client side but when i refresh it comes back — MontyGoldy
– MontyGoldy, Commented Jun 11, 2018 at 2:51
404 is still showstopper - check if your controller path is correct.. What backend do you use ? — Mirko Acimovic
– Mirko Acimovic, Commented Jun 11, 2018 at 2:54
i am using json-server to create fake api. Also I checked the route its fetching the right info. — MontyGoldy
– MontyGoldy, Commented Jun 11, 2018 at 2:56
try without query parameter to see if you are able to reach controller at all : localhost:3004/employees. see what kind of response you will get. — Mirko Acimovic
– Mirko Acimovic, Commented Jun 11, 2018 at 2:58

Mirko Acimovic · Accepted Answer · 2018-06-11 03:05:17Z

1

Axios can be sensitive with query parameters. If you can reach your controller the request should be sent like this :

axios
.delete(`http://localhost:3004/employees`, {
  headers: {
    "Content-Type": "application/json"
  },
  params: {
    employeeId: employeeId
  }
})
.then(
  dispatch({
    type: DELETE_EMPLOYEE,
    payload: employeeId
  })
)
.catch(err => console.log(err));

answered Jun 11, 2018 at 3:05

Mirko Acimovic

5062 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

React/Redux : Json-server unable to delete from db

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related