Immer 를 사용한 더 쉬운 불변성 관리

Immer 사용법

• Immer 설치

$ yarn add immer

• immer import

import produce from 'immer';

• 사용법

const state = {
  a: 1,
  b: 2
};

const nextState = produce(state, draft => {
  draft.a += 1;
});

console.log(nextState);
// { a: 2, b: 2 }

리듀서에서 Immer 사용하기

function reducer(state, action) {
  switch (action.type) {
    case 'CREATE_USER':
      return produce(state, draft => {
        draft.users.push(action.user);
      });
    case 'TOGGLE_USER':
      return produce(state, draft => {
        const user = draft.users.find(user => user.id === action.id);
        user.active = !user.active;
      });
    case 'REMOVE_USER':
      return produce(state, draft => {
        const index = draft.users.findIndex(user => user.id === action.id);
        draft.users.splice(index, 1);
      });
    default:
      return state;
  }
}

• 참고 사이트 : 23. Immer 를 사용한 더 쉬운 불변성 관리
  #Immer #react #react 객체 변경