reducers의 COMMET_REMOVE_SUCCESS

Question

제가 집에서 강의외의 COMMET_REMOVE_SUCCESS부분을 작성하다가 문제가 생겨서 질문 남깁니다. 우선 back 부분을 잘 작동합니다. DB에서 데이터를 지우고 그걸 화면에 반영하는 SUCCESS부분을 작성하는데 문제가 있습니다. mainPosts 안의 특정 포스트를 찾아 그 안의 특정 댓글을 제거해야 해서 저는 COMMET_REMOVE_SUCCESS reducers 부분을 이렇게 작성했습니다.

draft.mainPosts = [...state.mainPosts];
const post = draft.mainPosts.find((v) => v.id === action.postId);
post.Comments = post.Comments.filter(
(v) => v.id !== action.data.CommentId
);

UNLIKE_POST_SUCCESS 를 아래 처럼 작성하셔서 비슷한 방법으로 작성을 하였습니다.

const post = draft.mainPosts.find((v) => v.id === action.data.PostId);
post.Likers = post.Likers.filter((v) => v.id !== action.data.UserId);

하지만 Cannot assign to read only property 'Comments' of object '#<Object>' 이라는 오류를 받았습니다. 제가 생각하기에는 같은 방법으로 코드를 작성한거 같아 Likers는 이 오류가 뜨지 않는 이유가 궁금합니다. 여러 방식으로 이 이벤트를 완성하려고 해봤는데... 하루 종일 완성이 안되어서 질문 남깁니다.

Answer

인강 보고 배우는 학생으로 제 방법이 좋은 방법은 아니고 저도 그냥 이리 저리 한 2일동안 여러가지 다 시도해보다가 거의 얻어걸려서 작동하는거 같아서 왜 이렇게 작성 했는지는... 설명이 불가능하지만 우선 삭제 이벤트가 작동은 하는거 같으니 제 코드 공유하겠습니다^^

reducers/post.js 코드

case REMOVE_COMMENT_SUCCESS: {
draft.mainPosts = [...state.mainPosts];
const post = { ...draft.mainPosts.find((v) => v.id === action.postId) };
const comments = post.Comments.filter(
(v) => v.id !== action.data.CommentId
);
post.Comments = [...comments];

draft.mainPosts = draft.mainPosts.map((v) => {
if (v.id === action.postId) return post;
return v;
});

draft.removeCommentLoading = false;
draft.removeCommentDone = true;
break;
}

Answer

https://m.blog.naver.com/wideeyed/221796468370 여기에 에러 이유가 나와있네요. const post 다음에 post = { ...post } 넣어보세요.

Answer

아아, 불변성이 걸려있던 draft.mainPosts 기존 객체를 map으로 새로운 객체를 만들어냄으로서 불변성을 해제하셨네요.

Answer

혹시 이 부분 어떻게 해결하셨는지 알려주실 수 있으신가요?

Answer

블로그 포스트 보고도 잘 안되서 헤매긴 했지만~ 다른 소스도 더 찾아보고 해결했습니다^^ 감사합니다.

ambacc244

reducers의 COMMET_REMOVE_SUCCESS

이 글과 비슷한 Q&A

getServerSideProps에서 데이터가 제대로 내려오지 않는듯합니다.

다른 페이지갔다가 오면 게시글 불러와지는 이슈

도메인과 S3연결 후 AWS 요금 과금문제 문의드립니다.

서버연결이 안됩니다.