[Immer] An immer producer returned a new value and modified its draft.

Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft.

redux-toolkit을 공부하면서 북마크 데이터에 해당 id를 가진 글이 없으면 추가하는 기능을 구현하는 중 오류 발생

문제가 된 코드

setBookmark: (state, action) =>
  if (!state.data.find((item) => item.id === action.payload.id)) {
       state.data.push(action.payload);
  }

화살표 함수에서 중괄호 없이 한 줄로 쓰면 return이 자동으로 붙음
-> 리덕스 툴킷에는 불변성을 지켜주는 Immer 라이브러리가 있는데, state에 push하면서 새 값을 반환 + 원본 수정했기 때문에 오류가 발생했다.

해결

// 1. 중괄호로 감싸기
setBookmark: (state, action) => {
  if (!state.data.find((item) => item.id === action.payload.id)) {
       state.data.push(action.payload);
  }
}
// 2. 중괄호 대신 앞에 void 붙이기
setBookmark: (state, action) => 
  if (!state.data.find((item) => item.id === action.payload.id)) {
       void state.data.push(action.payload);
  }

이거 보고 해결
https://redux-toolkit.js.org/usage/immer-reducers
https://velog.io/@ohy9205/redux-toolkit-Immer-An-immer-producer-returned-a-new-value-and-modified-its-draft.-Either-return-a-new-value-or-modify-the-draft

작년에 만났던 오류였는데 그때 정리해 놓은 거 보면서 뭔가 이상해서 다시 찾아보니까 그때에 잘 못 이해한 거였다. (if절 중괄호에 문제가 있다고 생각한듯)
근데 블로그 따라하면서 고치긴 고쳤나보다;;..
뒷걸음 해결...
지금도 잘 못 이해한 건 아니길🙏