redux toolkit 배열 객체 요소 수정하기 | [Immer] An immer producer returned a new value *and* modified its draft 에러 해결 | 언제 return 사용?

데이터 구조

상태는 배열 타입이고, 배열의 요소는 각 object 객체이다.

 

const initialState = [{id: '1', isDone: false }, {id: '2', isDone: false }, ...]

 

목표

위와 같은 데이터 구조를 가지고있는 전역 상태 state 배열에서 해당하는 요소를 먼저 찾고, isDone 속성을 바꾸고 싶다.

redux toolkit을 사용해서 상태를 관리하는데, 배열 안 특정 요소의 속성 isDone을 유저가 누르는 checkbox 이벤트 값대로 바꿔야한다.

 

UI 코드

유저가 체크하는 체크박스의 event.target.checked 값을 받아서 rtk 슬라이스로 dispatch하는 코드

 

export interface Todo {
  id: string;
  isDone: boolean;
}
interface Props {
  data: Todo;
}

export const TodoBox = ({data}: Props) => {

  const handleChangeCheckBox = (e: React.ChangeEvent<HTMLInputElement>) => {
  	dispatch(updateTodoCheck({ id: data.id, isDone: e.target.checked }));
  };

  return (
    <Box sx={{ border: 'solid 1px' }}>
      <Checkbox
        checked={data.isDone}
        onChange={handleChangeCheckBox}
        inputProps={{ 'aria-label': 'controlled' }}
      />
  )
 }

상태값을 슬라이스로 dispatch 하면, 이후에 슬라이스에 있는 리듀서 함수가 작동하면서 해당 요소의 isDone 상태값을 업데이트하게 된다.

 

export const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    updateTodoCheck: (state, action) => {
        //방법1)2)3) 함수가 위치하는 곳
    }
  }
})

 

하기 명시할 방법 1, 2, 3들은 모두 슬라이스의 reducers 함수 안에 구현될 코드이다.

방법 1) 배열 요소 찾아서 값 재할당

🟢 

updateTodoCheck: (
      state,
      action: PayloadAction<{ id: string; isDone: boolean }>,
    ) => {
    const targetTodoIdx = state.findIndex(
    (el) => el.id === action.payload.id
  	);
    state[targetTodoIdx].isDone = action.payload.isDone;
  }

생각나는 가장 간단한 방법은
먼저 수정하고 싶은 배열 요소의 인덱스를 찾아내는 것이었다.
그리고 그 배열의 isDone 키값을 dispatch 함수 주는 payload.isDone 값으로 재할당하는 것이었다.
 

Redux의 원칙에 따라 상태값은 읽기 전용이어야하고, 리듀서 함수는 순수함수로 작성되어야 함으로 이전 상태를 변경하면 안되고 새로운 상태 객체를 만들어서 반환해야 함으로 위의 예제처럼 배열의 인덱스를 찾아서 직접 값을 재할당하는게 안될 것 같지만... 

Redux toolkit 리듀서에서 이 방법은 문제없이 아주 잘 작동을 한다.

 

그 이유는 리덕스툴킷에서 `createReducer` 및 `createSlice`를 사용해서 reducer 함수를 작성하면 내부적으로 Immer라는 라이브러리 구현이 되어있기 때문에 mutable하게 원본을 변경하는 함수를 작성할지라도 불변성이 유지된다. 즉, 원본 상태는 변경되지 않게 내부적으로 구현되어있다.
상단 코드에서는 state 특정요소에 새로운 값을 재할당하므로서 원본배열인 state가 변경되지만, 내부적으로 Immer가 구현되어있기 때문에 불변 상태값으로 관리된다.

방법 2) Object.assign 활용

2-1) ❌

updateTodoCheck: (
  state,
  action: PayloadAction<{ id: string; isDone: boolean }>,
    ) => {
      return state.map((el) => {
        if (el.id === action.payload.id) {
          return Object.assign(el, {
            isDone: action.payload.isDone,
          });
        }
        return el;
      });
    },

 
statet 상태값 원본 배열을 map으로 loop 돌리면서 리덕스툴킷의 action payload로 싣어준 배열의 id값과 state 원본배열의 id가 같은 요소를 찾는다.
그리고 Object.assign 을 이용해서 새로운 isDone 속성값으로 할당한다.

Object.assign(변경할 객체, 새로운 값으로 merge할 객체)

하지만, Object.assign 메서드를 위와 같이 변경할 객체를 target 자리 맨 앞 인자로 적어주면, 그 때는 그 변경할 target 객체의 값을 새로운 값으로 덮어씌운 것이기 때문에 원본 데이터 state가 변경된다. 

이때 Object.assgin 메서드는 mutable로 원본 데이터를 변경시킨다.
그리고 이 경우 redux toolkit 슬라이스에서 에러가 발생한다. 
 

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

 

❗️에러 내용
새로 변경된 데이터가 리턴됨과 동시에 원본 데이터가 수정됨. 새로운 값을 리턴하던지 아니면 원본 데이터를 수정하던지 둘 중에 하나만 해라

2-2) 🟢

updateTodoCheck: (
  state,
  action: PayloadAction<{ id: string; isDone: boolean }>,
    ) => {
      state.map((el) => { // <------------------- 여기! return 을 빼준다
        if (el.id === action.payload.id) {
          Object.assign(el, { isDone: action.payload.isDone });
        }
        return el;
      });
    }

에러메시지대로 state의 원본 데이터가 변경되었고, 그 변경된 값을 반환까지 하는 것으로 Immer에서 에러를 내니 둘 중에 하나를 택한다.

함수 자체의 return키워드를 빼준다.

위 예제에서 state는 원본 데이터가 변경되고난 후 수정된 값을 가지고있으므로 state는 원본데이터를 수정한 값을 이제 가지고있다.
이제 새로만들어진 데이터를 리턴하지않고 원본데이터를 수정한값만 가지고 있기때문에 에러는 없어진다.

그리고 2-2) 방법 또한 원본배열이 mutate되어 원본 데이터값이 변했지만 Immer가 내부적으로 불변값으로 알아서 관리해준다.

2-3) 🟢

updateTodoCheck: (
  state,
  action: PayloadAction<{ id: string; isDone: boolean }>,
    ) => {
      return void state.map((el) => { // <-------- 여기! return 후 void 키워드를 같이 넣어준다.
        if (el.id === action.payload.id) {
          Object.assign(el, { isDone: action.payload.isDone });
        }
        return el;
      });
    }

또는 2-1) 예제에서 return 이후에 void 키워드를 추가하면 에러없이 잘 작동한다.
return 바로 다음에 void 키워드를 써주면 반환되는 값을 건너띄게 하는 것이다. 즉, 위 예제에서는 반환값을 건너띄우고 mutate한 state 데이터 자체를 reducer 함수의 결과값으로 가지고 있는 것이다.
그렇게되면 2-2) 예제와 동일하게 이 reducer는 원본이 변경된 state를 가지고 있는 것이다.
 

🙋‍♀️ void 키워드를 넣는 이유?
Immer가 시도된 mutation(변경된 원본 데이터)와 새로 리턴된 데이터 값중 무슨 값을 결과로 사용해야되지 몰라서 에러를 발생 시키기 때문이다.
에러메시지를 다시 떠올려보자.
새로 변경된 데이터를 리턴하던지, 원본 데이터를 수정하던지 둘 중에 하나만 하라.
 
위 예제의 경우는 state 값이 Object.assign메서드로 원본 데이터가 mutate 변경되었기 때문에 새로 변경된 배열 데이터를 return하는 걸 포기하고 변경된 값 자체를 결과값으로 가져가는 격이다.
 

2-4) 🟢

Object.assgin() 메서드라고 모두 원본값을 변경시키는 mutable 메서드가 아니다.

새로운 객체를 복사해서 원본값이 변경되지 않도록 만들 수도 있다. 

 

updateTodoCheck: (
  state,
  action: PayloadAction<{ id: string; isDone: boolean }>,
) => {
      //state를 immutable하게 수정
      return state.map((el) => {
        if (el.id === action.payload.id) {
          return Object.assign({}, el, {
            isDone: action.payload.isDone,
          });
        }
        return el;
      });
},

 

위 예제는 마찬가지로 배열 state 데이터를 고차함수 map으로 loop 돌리면서, 조건을 먼저 분기한다.

payload 액션으로 받는 id 와 state 배열 데이터중 같은 값이 있는지? 

있으면? 그 객체 요소 값의 isDone 값을 변경한다.

이때, Object.assign 메서드에서 가장 첫번째 인자인 target 인자에 빈 객체리터럴 {}을 넣어주면 {}라는 새로운 객체가 만들어지고 새로운 객체가 리턴된다는 뜻이다. 그리고나서 빈객체에 el이라는 요소가 병합되고, 또 내가 원하는 isDone 프로퍼티 값도 병합이 된다.

 

즉, Object.assign({}, 새로 바꾸려는 객체)를 활용하면, 원본 요소 데이터를 수정하는 것이아니고, 새로운 객체에 복제하는 것이 되어 immutable 하게 수정할 수 있다.

 

방법 3) spread 연산자 활용

🟢

updateTodoCheck: (
  state,
  action: PayloadAction<{ id: string; isDone: boolean }>,
) => {
      return state.map((el) => {
        if (el.id === action.payload.id) {
          return {
            ...el,
            isDone: action.payload.isDone,
          };
        }
        return el;
      });
},

마찬가지로 배열 state를 loop 돌리면서 찾는 id 값이 있는지 확인하려고 조건을 분기한다.

찾는 id 값이 있으면?

새로운 객체 리터럴 {}을 적어주어 spread 연산자로 원래 el 값을 복사해오고, 거기에 payload로 받는 isDone 값을 덮어씌운 값을 리턴한다. 

없으면? 그냥 원래의 el 요소 리턴한다.

 

객체를 spread 연산자로 얕은 복사해서 state는 immutable하게 수정되었다. 원본 데이터 state는 수정하지 않은 상태에서 state를 리턴하므로 잘 작동한다.

 

결론 

Redux toolkit에서 reducers에 작성하는 함수에서 원본 state 데이터가 변경이 된다면? return을 쓰면 안된다. 

원본데이터를 변경도 하고, 그 변형된 값을 반환하는 것이므로 immer 라이브러리에서 에러처리를 한다.

원본 데이터가 변경이 안되고 불변성을 유지한 상태일때만 return부를 써서 업데이트된 상태를 반환할 수 있다.

 

 

Reference 

https://redux-toolkit.js.org/usage/immer-reducers

Writing Reducers with Immer | Redux Toolkit

https://ko.redux.js.org/understanding/thinking-in-redux/three-principles

3가지 원칙 | Redux

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign