immer

redux에서 reducer는 불변성을 띄어야하는 특징이 있다 불변성을 띄어야지만 우리는 나중에 디버깅할때 유리하기 때문이다.

실제 불변성을 유지한 코드

const initialState = {
  isLoggingIn: false,
  data: null,
};
export const userReducer = (prevState = initialState, action) => {
  //새로운 스테이트 만들어주기
  switch (action.type) {
    case "LOGIN":
      return {
        ...prevState,
        isLoggingIn:false
        data: action.data,
      };
    case "LOGOUT":
      return {
        ...prevState,
         isLoggingIn:true
        data: action.data,
      };
    default:
      return prevState;
  }
};

스프레드 문법을 통해 기존의 prevState를 유지한채로 새로운 스테이트를 만들어주는 reducer이다 스프레드 문법으로 불변성을 유지했다. 하지만 직관적이지가 않다. 아마 좀 더 복잡한 reducer 코드이면 정말 보기 힘들 것 이다.

immer

그래서 좀 더 직관적인 reducer를 짤건데 그 때 유용한게 immer 라이브러리 이다.

npm i immer

immer를 install 한 후

export const userReducer = (prevState = initialState, action) => {
  return produce(prevState, (draft) => {
    switch (action.type) {
      case "LOGIN":
        draft.data = action.data;
        draft.isLoggingIn = false;
        break;
      case "LOGOUT":
        draft.data = action.data;
        draft.isLoggingIn = true;
        break;
      default:
        break;
    }
  });
};

첫번째로 import를 해와야 한다. produce로 import를 해온다.
그리고 produce를 return 해오고 draft인자인 함수로 switch 해준다. draft는 기존 prevState를 가져온다 라는 뜻이다. 즉, 기존 prevState를 가져온 상태를 유지하면서 data등을 넣는다.