immer란?

객체의 불변성을 지키는 것을 쉽게 도와주는 라이브러리이다.

보통 추가, 제거, 변경 등 몇가지 일을 할 때 전개연산자...을 사용해서 불변성을 지키는데, 

immer이라는 라이브러리를 사용하면 훨씬 쉽게 할 수 있다.

 

아래는 추가와 변경의 간단한 예제이다.

import produce from 'immer'

const baseState = [
	{
    	todo: "Learn typescript",
        done: true,
    },
    {
    	todo: "Try immer",
        done: false,
    },
];

const nextState = produce(baseState, draftState => {
	draftState.push({todo: "Tweet about it"});
    draftState[0].done : true;
});

immer에서는 오직 produce만 알면 된다.

2가지 파라미터를 가져오고 그중 첫번째는 수정하고 싶은 객체/배열이고,

                                                               두번째는 첫펀째 파라미터에 할당된 객체/배열을 바꾸는 함수이다.

 

 

reduc에서 immer쓰기

immer쓰기 전 코드

const initialState = [{ name: "nkh", address: { city: "seoul" } }];

export default function auth(state = initialState, action) {
  switch (action.type) {
    case SET_INFO:
      return {
        ...state,
        name: "kkkk",
        address: {
          ...state.address,
          city: "kkkk"
        }
      };
    default:
      return state;
  }
}

 

immer을 사용한 redux 코드

const initialState = [{ name: "nkh", address: { city: "seoul" } }];

export default function auth(state = initialState, action) {
  produce(state, draft => {
    switch (action.type) {
      case SET_INFO:
        draft[0].name = action.data.name;
        draft[0].address.city = action.data.city;
        break;
      case ADD_INFO:
        draft.push({ name: "hhh", address: { city: "zzz" } });
      default:
        return draft;
    }
  });
}

굉장히 활용성 높은 라이브러리인것 같아 사용해보고싶다.