RTK updateQueryData로 삭제 시 주의할 점

이럴 때가 있다. updateQueryData를 이용해서 미리 state를 업데이트하는데, 삭제한 값을 넣었는데도 왜 삭제가 안 될까? 원인은 바로 filter를 썼기 때문이다.

예를 들어 이렇게 쓰면 안 된다:

dispatch(
  api.util.updateQueryData('list', { deleteId }, draft => {
    // 이렇게 하면 안 된다! 
    draft = draft.filter(obj => obj.id !== deleteId);
  })
);

왜냐면, draft를 이렇게 통째로 재할당해버리면, immer가 바뀐 걸 인지하지 못한다!

그래서 이렇게 splice를 사용해야 한다:

dispatch(
  api.util.updateQueryData('list', { deleteId }, draft => {
    const index = draft.findIndex(obj => obj.id === deleteId);
    if (index !== -1) {
      draft.splice(index, 1);  // 이게 정답!  
    }
  })
);

요약하면, immer 기반인 updateQueryData 내부에서는 draft를 직접 재할당하지 말고, mutable 방식으로 수정해야 한다.

이 점만 주의하면 깔끔하게 삭제도 잘 된다.

 

----

 

 

• Immer: 불변성을 지키면서도 상태를 쉽게 수정하도록 도와주는 라이브러리
• Immer 기반 코드: draft라는 임시 상태를 직접 수정하는 패턴
• draft를 직접 할당하지 말고, 내부 값만 고쳐야 함!