[❗️Error Handling] [Workspace - Chat] redux-toolkit immer 에러

[useonglee]

어떤 에러인가요?

• 채팅을 수정하거나 삭제를 하려면 해당 채팅의 고유 id를 알아야 한다.
• 그래서 렌더링 시 서버에서 채팅 id를 받아와서 삭제나 수정요청을 할 때 사용을 하는데, 갑자기 id를 읽어 올 수 없다는 에러가 떴다.
• 그리고 redux-toolkit을 쓰면 자바스크립트 내장 메소드를 사용해도 불변성을 고려해주는 immer 내장 라이브러리가 있는데, 이 에러가 뜬 것이다...

에러 메시지

1번 에러

2번 에러

에러 핸들링 방법

첫번째 에러는 간단했다. 소켓은 양방향 통신이기에 서버와 주고 받는 데이터는 모두 같아야 한다. 서버에서는 객체 형태로 감싸서 클라이언트로 보내주는데, 내가 구조 분해 할당을 하지 않고 바로 받아 버린 것이다.

// 수정 전
socket?.on('nowMessageId', (id, chatLength: ChatIdType) => {
  dispatch(messageId({ id, chatLength }));
});

// 수정 후
socket?.on('nowMessageId', ({ id, chatLength }: ChatIdType) => {
  dispatch(messageId({ id, chatLength }));
});

두번째 에러는 내가 redux-toolkit을 사용하면서 immer 라이브러리를 제대로 활용하지 못해서 생긴 에러였고, 지금 생각해보니 반환 자체도 잘못하고 있었다. 필요한건 수정 및 삭제를 해야하는 채팅 데이터 하나뿐이였다.

// redux store

// 수정 전
messageId: (state, { payload }: PayloadAction<ChatIdType>) => {
  const copyChat = state[chatLength];
  copyChat.id = id
  const copyState = [...state.slice(0, idx), copyChat, ...state.slice(idx + 1)]
  return [...copyState]
},

// 수정 후
messageId: (state, { payload }: PayloadAction<ChatIdType>) => {
  const { chatLength, id } = payload;
  state[chatLength].id = id;
};

에러 핸들링을 위해 참고한 레퍼런스 링크

(#은욱)