TIL 47. 2024-03-06

const todosSlice = createSlice({
  //이름, 초기값, reducer
  name: "todos",
  initialState,
  //상태 변화
  reducers: {
    //추가 기능
    addTodo: (state, action) => {
      return [action.payload, ...state];
    },

    //수정 기능
    modifyTodo: (state, action) => {
      const findNext = state.find((item) =>
        item.id === action.payload ? true : false
      ); // 해당 id값을 객체로 출력
      findNext.isDone = !findNext.isDone; //해당 객체의 상태 반전
      const filterPrev = state.filter((item) =>
        item.id !== action.payload ? true : false
      ); // 해당 되지 않는 나머지를 배열로 출력
      return [...filterPrev, findNext];
    },
    //삭제 기능
    deleteTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
  },
});

위의 수정 기능 부분의 코드에서
[Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.에러가 발생하였다.
에러를 해석해보니
: Immer에서 draft를 수정하면서 동시에 새로운 값을 반환했거나, draft를 수정하지 않고 새로운 값을 반환했을 때 발생합니다. draft를 수정하거나 새로운 값을 반환하는 것은 둘 중 하나만 해야 한다.

에러 지점

//1. 값을 새로 할당
const findNext = state.find((item) =>
        item.id === action.payload ? true : false
      ); 

//2. 값을 수정
findNext.isDone = !findNext.isDone; 

Immer는 draft를 수정하거나 새로운 값을 반환하는 것 중 하나만 허용하므로, 이 부분에서 문제가 발생합니다.

해결 방법

    return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });