[Redux] reducer에서 immer를 이용한 불변성관리 예시코드.

[Redux] reducer에서 immer를 이용한 불변성관리 예시코드.

---

리덕스에서 새로운 state를 반환해주기 위한 함수로 reducer를 사용한다.

reducer에서는 한가지 지켜줘야하는 것이 있는데, 바로 불변성이다.

불변성을 지키기 위해서는 이전상태를 변경하지 않고, 이전 상태를 참조해 새로운 상태를 반환해 줘야된다.

이때, 주로 얕은 복사를 이용한다. 

얕은 복사를 이용해서 충분히 불변성을 유지할 수 있지만, depth가 깊어질수록 코드가 길어지고 가독성이 떨어지는 문제가 발생한다.

이를 해결하기 위해 등장한 것이 immer이다.  예시 코드를 통해 immer를 이용해 불변성 관리하는 방법을 확인해보자.

 

@ immer

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

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

// immer를 사용하기 위해서는 produce(prevState, callback) 함수로 감싸주어야 한다.
// callback함수의 인자로는 draft를 넣어준다.
// draft는 prevState를 얕은복사한 값이라고 생각하면 된다.
// draft값을 변경해 불변성을 유지한채 nextState를 만들 수 있다.
const userReducer = (prevState = initialState, action) => { 
  return produce(prevState, (draft) => {
    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;