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는 이 오류가 뜨지 않는 이유가 궁금합니다. 여러 방식으로 이 이벤트를 완성하려고 해봤는데... 하루 종일 완성이 안되어서 질문 남깁니다.

ambacc244 · 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 ; }

zerocho · Answer

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

zerocho · Answer

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

zerocho · Answer

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

ambacc244 · Answer

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