21.08.01 23:08 작성
·
284
0
안녕하세요 현영님!
좋아요 기능 구현 실습하면서 다음과 같은 오류가 발생했습니다.
오류 메시지를 통해서 사가쪽에서 발생하는 오류라는 것은 알 수 있었는데, 현영님 깃헙과 비교하면서 찾아봐도 어디서 잘못됐는지 확인할 수 없어서 질문드립니다ㅠ
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에도 좋아요가 잘 추가가 됩니다.
2. 브라우저에서는 위의 오류가 발생하고 새로고침하면 좋아요 기능이 적용되어 있습니다.
2021. 08. 01. 23:53
콘솔로 확인해보니, likePostAPI로 응답값으로 받은 result가 undefined인걸 확인했는데, 서버쪽에서는 성공적으로 response 객체로 응답하는데 왜 undefined가 나오는지 감이 잡히질 않습니다 ㅠ