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;
}
});