immer(코드를 줄일 수 있음)

불변성 유지

리덕스에서는 불변성을 유지하기 위해서

      initialState.data = null;
      initialState.deep.deeper.deepest.a = 'b';

이렇게만 바꿔도 되는 코드를

      return {
        ...prevState,
        data: null,
        deep: {
          ...prevState.deep,
          deeper: {
            ...prevState.deeper,
            deepest: {
              ...prevState.deepest,
              a: 'b',
            }
          }
        }
      }

이렇게 복잡하게 바꿔줘야한다. 코딩하는 양도 많아지고 직관적이지 못하다. 이것을 편안하게 해주는 것이 immer라는 라이브러리이다.

immer

reducer는 action을 바탕으로 다음 state를 만들어내는 것이다. 그렇기에 reducer는 (이전 state, action)을 받은 다음 state를 리턴해준다. immer도 다음 state를 리턴해주는 점이 똑같다.

 

-immer의 기본 형태

nextState = produce(prevState, (draft) => {})

prevState: 이전 state

(draft) => {}: action과 같은 역할

 

-적용 예시(reducers/user.js)

const { produce } = require("immer");

const initialState = {
  isLoggingIn: false,
  data: null,
};

const userReducer = (prevState = initialState, action) => {
  return produce(prevState, (draft) => {
    // 새로운 state 만들어주기
    switch (action.type) {
      case "LOG_IN_REQUEST":
        draft.data = null;
        draft.isLoggingIn = true;
        break;
      case "LOG_IN_SUCCESS":
        draft.data = action.data;
        draft.isLoggingIn = false;
        break;
      case "LOG_IN_FAILURE":
        draft.data = null;
        draft.isLoggingIn = false;
        break;
      case "LOG_OUT":
        draft.data = null;
        break;
      default:
        return prevState;
    }
  });
};

module.exports = userReducer;

이렇게 기존에 있던 reducer를 immer의 기본 형태 안에 넣어주고, 구조분해 할당으로 produce를 가져온다.

prevState는 불변성을 가져야 하기 때문에 draft가 prevState의 복사본이라 보면된다. 그리고 이제는 draft를 이용해서 직관적으로 데이터를 변경해주면 된다. 이렇게하면 immer에서 복잡한 코드를 알아서 처리해준다.