React redux와 함께 axios를 이용해서 delete하기

Today, What I learned?

오늘은 axios를 다루다가 만난 에러에 대해서 써보려 한다.

JSON-Server로 redux-thunk를 이용해서 데이터를 CRUD 하는 작업을 하고 있었다.

추가까지는 어찌어찌했는데 삭제를 누르는 순간.. 화려한 에러가 나를 반겼다.

 

 

에러와 원인

payload와 관련해서 생긴 오류인 듯 보였다.

작성했던 코드는 이랬다.

추가했듯이 payload로 id를 보내주면 될 줄 알았는데!!... 아니었던 것.
이후에 저 공간에 data라는 객체로 감싸서 payload를 넘겨보기도 했지만 결과는 똑같았다.

 

 

Axios 공식 문서를 보면 HTTP 메서드에 따라서 들어가는 인자가 조금씩 다르다.

 

 

아래와 같이 post 메서드로 보낼 경우에는 두 번째 인자인 payload가 data로 전달되지만,

위와 같이 작성했던 내 코드에서는 config로 전달된다. config에는 정해진 것들이 있기 때문에.. 오류가 뜨는 게 당연했던 것 🥺

 

 

해결

그래서 아래와 같이 restful한 url로 전달하면서 통신이 성공했을 경우 payload의 id를 리턴할 수 있도록 했다.

그럼 이제 리듀서에서는 id 값을 받아서 필터링하고 새로운 투두리스트 상태를 저장하는 것으로 마무리..

 

 

알게 된 점

서버로부터 데이터를 핸들링하기 위해 redux-thunk를 이용하다 보니 많은 것을 새롭게 알게 되었는데, axios api를 사용하기 전에 요구되는 인자가 무엇인지도 잘 확인하고 써야겠다는 생각이 들었다!..