like/unlike 사가 오류 질문
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 현영님! 좋아요 기능 구현 실습하면서 다음과 같은 오류가 발생했습니다. 오류 메시지를 통해서 사가쪽에서 발생하는 오류라는 것은 알 수 있었는데, 현영님 깃헙과 비교하면서 찾아봐도 어디서 잘못됐는지 확인할 수 없어서 질문드립니다ㅠ 사가 코드 import axios from "axios"; import { call, put, fork, takeLatest, all, throttle } from "redux-saga/effects"; import { ADD_POST_PENDING, ADD_POST_SUCCESS, ADD_POST_ERROR, ADD_COMMENT_PENDING, ADD_COMMENT_SUCCESS, ADD_COMMENT_ERROR, REMOVE_POST_PENDING, REMOVE_POST_SUCCESS, REMOVE_POST_ERROR, LOAD_POSTS_PENDING, LOAD_POSTS_ERROR, LOAD_POSTS_SUCCESS, LIKE_POST_PENDING, LIKE_POST_SUCCESS, LIKE_POST_ERROR, UNLIKE_POST_PENDING, UNLIKE_POST_SUCCESS, UNLIKE_POST_ERROR } from "../reducers/post"; import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from "../reducers/user"; //-------------------------------------------- function loadPostsAPI() { return axios.get("/posts"); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data }); } catch (err) { yield put({ type: LOAD_POSTS_ERROR, data: err.response.data }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_PENDING, loadPosts); } function addPostAPI(data) { return axios.post(`/post`, { content: data }); } function* addPost(action) { try { console.log("addPost 함수 실행"); const result = yield call(addPostAPI, action.data); // const id = shortId.generate(); console.log("axios 통신을 마쳤습니다.", result); yield put({ type: ADD_POST_SUCCESS, data: result.data }); yield put({ type: ADD_POST_TO_ME, data: result.data.id }); } catch (err) { yield put({ type: ADD_POST_ERROR, data: err.response.data }); } } function* watchAddPost() { console.log("watchAddPost 실행"); yield takeLatest(ADD_POST_PENDING, addPost); } function removePostAPI(data) { return axios.delete(`/post/${data}`); } function* removePost(action) { try { console.log(action.data); const result = yield call(removePostAPI, action.data); yield put({ type: REMOVE_POST_SUCCESS, data: result.data // id }); yield put({ type: REMOVE_POST_OF_ME, data: action.data }); } catch (err) { yield put({ type: REMOVE_POST_ERROR, data: err.response.data }); } } function* watchRemovePost() { yield takeLatest(REMOVE_POST_PENDING, removePost); } //-------------------------------------------- function addCommentAPI(data) { return axios.post(`/post/${data.postId}/comment`, data); } function* addComment(action) { try { const result = yield call(addCommentAPI, action.data); yield put({ type: ADD_COMMENT_SUCCESS, data: result.data }); } catch (err) { console.error(err); yield put({ type: ADD_COMMENT_ERROR, data: err.response.data }); } } function* watchAddComment() { yield takeLatest(ADD_COMMENT_PENDING, addComment); } //-------------------------------------------- function likePostAPI(data) { axios.patch(`/post/${data}/like`); } function* likePost(action) { try { console.log("좋아요 사가 액션 데이터", action.data); const result = yield call(likePostAPI, action.data); console.log("좋아요 사가 result 데이터", result.data); yield put({ type: LIKE_POST_SUCCESS, data: result.data // {PostId, UserId} 11, 2 }); } catch (err) { console.error(err); yield put({ type: LIKE_POST_ERROR, data: err.response.data }); } } function* watchLikePost() { yield takeLatest(LIKE_POST_PENDING, likePost); } //-------------------------------------------- function unlikePostAPI(data) { axios.delete(`/post/${data}/like`); } function* unlikePost(action) { try { console.log("좋아요 취소 사가 액션 데이터", action.data); const result = yield call(unlikePostAPI, action.data); console.log("좋아요 취소 사가 result 데이터", result.data); yield put({ type: UNLIKE_POST_SUCCESS, data: result.data }); } catch (err) { console.error(err); yield put({ type: UNLIKE_POST_ERROR, data: err.response.data }); } } function* watchUnlikePost() { yield takeLatest(UNLIKE_POST_PENDING, unlikePost); } //-------------------------------------------- export default function* postSaga() { yield all([ fork(watchLikePost), fork(watchUnlikePost), fork(watchAddPost), fork(watchAddComment), fork(watchRemovePost), fork(watchLoadPosts) ]); } PS. 1. 서버쪽에서는 요청을 받아서 성공적으로 응답을 보내주고, DB에도 좋아요가 잘 추가가 됩니다. 터미널 로그 DB 좋아요 테이블 2. 브라우저에서는 위의 오류가 발생하고 새로고침하면 좋아요 기능이 적용되어 있습니다.
- 사가
- redux
- express
- nodejs
- react
- Next.js