immer

immer는 currentState의 프록시객체인 임시 draftState를 생성하여 수정, nextState를 생성하게 된다.

불변성을 유지하기위해 기존 reducer에서는 전개연산자 ,concat, filter, map같은 함수를 이용했지만, 가독성이 떨어지면 직관적이지 않다는 단점이 있다

immer를 활용하면 이부분을 해소할수 있다.

// 설치
npm i immer

produce(prevState, producer: (draftState) => void): nextState
* prevState : 현재 state
* draftState : 현재 state의 프록시객체(복사판같은)
* nextState : producer 함수가 반환하는 값

const { produce } = require('immer'); //리듀서를 좀더 직관적인 형태로 정리하기위해 immer사용

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

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

const userReducer = (prevState = initialState, action) => { // action을 바탕으로 새로운 state 만들어주기
  return produce(prevState, (draft) => {  // produce = nextState
    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:
        break;
    }
  });
};

module.exports = userReducer;