Immer

Immer는 Redux의 불변성 문제를 해결하는 간편화 라이브러리

Reducer는 앞선 포스팅에서 설명했듯 불변성을 지키며 이전 상태를 Action을 통해 다음 상태로 만드는 함수다.

하지만 이 과정에서 불변성을 지키는 과정은 굉장히 비효율적이다.

그래서 이러한 단점을 해결하기 위해 Immer라는 라이브러리를 사용한다.

사용 방법

Immer는 draft인자를 사용해 현재 상태값을 복사한 뒤 이를 참조하여 새로운 상태를 return한다.

사용하는 방법은 다음과 같다.

1. 아래 npm명령어를 통해 Immer를 설치

npm i immer

2. 기존코드에 아래와 같이 Immer를 적용

// 기존 코드
const reducer = (state = initialState, action) => {  
  switch (action.type) {
    case ADD_POST_REQUEST:
      return {
        ...state,
        name = 'Mirrer',
        age = 20,
        gender = 'Man',
      }
  }  
}

// immer 적용
const reducer = (state = initialState, action) => {  
  return produce(state, (draft) => {
    switch (action.type) {
      case ADD_POST_REQUEST:
        draft.name = 'Change Miirer',
        draft.age = 30,
        draft.gender = 'Women',
        break;
    }
  })
}

IE환경의 Immer

Internet Explorer환경에서 Immer를 사용하기 위해서는 다음과 같은 추가 설정이 필요하다.

단, Internet Explorer 11이외에는 적용되지 않는다.

1. util/produce.js파일을 생성하여 아래와 같이 enableES5를 설정

기존에는 Entry Point, 즉 프로젝트의 최상단에 적용하면 된다.

하지만 Next.js에는 React Dom의 Render가 존재하지 않아 다음과 같이 produce를 직접 확장한다.

// util/produce.js
import produce, { enableES5 } from 'immer';

export default (...args) => {
	enableES5(); // produce 전 enableES5함수를 실행
	return produce(...args);
};

2. Reducer를 다음과 같이 수정하여 enableES5를 적용한다.

// reducers/post.js
import produce from '../util/produce';

export const initialState = {
						:
						:
}

참고 자료

Redux 공식문서
React로 NodeBird SNS 만들기 - 제로초