[redux-toolkit] [Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the 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 creatSlice로 만든 action을 컴포넌트에서 호출할 때 발생

원인

state 변경 시 새 값을 반환하면서 원본도 수정했기 때문에 발생하는 에러

redux-toolkit의 immer사용 규칙을 보면 원본을 변경하던가 새 값을 리턴하던가 둘 중 하나만 해야함(에러내용)

immer
redux-toolkit사용 시 사용자가 원본 state를 건드려도 내부에서 원본 state를 변경하지 않도록 알아서 관리해주는 라이브러리

내가 createSlice로 만든 reducer의 add는 state.push를 실행함

const toDos = createSlice({
  ...
  reducers: {
    add: (state, action) => 
      state.push({ text: action.payload, id: Date.now() }),
});

근데 arrow함수에서 이렇게 중괄호 없이 한줄로 쓰면 자동으로 앞에 return 키워드가 붙음. 즉, 내 코드는 return state.push 로 동작 중 (그리고 array.push는 배열 길이를 반환함)

해결

state.push를 중괄호로 감싸주거나

 add: (state, action) => {
      state.push({ text: action.payload, id: Date.now() });
    },

중괄호를 쓰지 않으려면 void 키워드를 붙인다

add: (state, action) =>
      void state.push({ text: action.payload, id: Date.now() })