자바스크립트 Immer로 리덕스 미들웨어 만들기

27 Sep 2023

immer

리덕스는 상태 관리를 위한 라이브러리로 널리 사용되고 있습니다. 리덕스를 사용하면 상태 변화를 예측 가능하고 추적 가능한 방식으로 관리할 수 있습니다. 하지만 상태의 변화 작업이 복잡해지면 코드의 가독성과 유지보수성이 떨어질 수 있습니다. 이런 문제를 해결하기 위해 Immer라는 라이브러리를 사용하여 리덕스 상태를 변경하는 미들웨어를 만들어보겠습니다.

Immer란?

Immer는 불변성을 유지하면서 상태를 업데이트하는 작업을 쉽게 할 수 있도록 도와주는 라이브러리입니다. Immer를 사용하면 불변성을 유지하기 위한 복잡한 작업을 직접 처리하지 않고도 간단하게 상태를 변경할 수 있습니다.

리덕스 미들웨어 만들기

먼저, Immer를 사용하여 리덕스 미들웨어를 만들기 위해 다음 단계를 따라해보겠습니다.

Immer를 설치합니다.

npm install immer

미들웨어 함수를 작성합니다. (redux-thunk나 redux-saga와 같은 리덕스 미들웨어 작성 방식과 동일합니다)

import produce from 'immer';

const immerMiddleware = (store) => (next) => (action) => {
  const nextState = produce(store.getState(), (draft) => {
    // 상태 변경 작업을 수행합니다.
    switch (action.type) {
      case 'INCREMENT':
        draft.count += 1;
        break;
      case 'DECREMENT':
        draft.count -= 1;
        break;
      default:
        break;
    }
  });

  next({ ...action, payload: nextState });
};

export default immerMiddleware;

위의 코드에서 produce 함수는 Immer를 사용하여 불변성을 유지하면서 상태를 변경하는 역할을 합니다. immerMiddleware 함수는 리덕스 미들웨어의 구조에 맞게 작성되어 있습니다.

미들웨어를 리덕스 스토어에 적용합니다.

import { createStore, applyMiddleware } from 'redux';
import immerMiddleware from './immerMiddleware';

// 리듀서 함수 정의 및 createStore 함수로 스토어 생성

const store = createStore(rootReducer, applyMiddleware(immerMiddleware));

// 스토어 사용 예시
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }

위의 예제에서는 rootReducer는 실제 리듀서 함수를 대신한 예시입니다. 이렇게 미들웨어를 리덕스 스토어에 적용하면 액션을 디스패치할 때마다 미들웨어가 동작하여 상태 변경 작업을 처리하게 됩니다.

결론

리덕스는 상태 관리를 효율적으로 할 수 있는 강력한 라이브러리입니다. 하지만 복잡한 상태 변경 작업을 처리하기 위해서는 코드의 가독성과 유지보수성의 문제가 발생할 수 있습니다. Immer를 사용하여 리덕스 상태를 변경하는 미들웨어를 만들면, 불변성을 유지하면서 상태를 간편하게 업데이트할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

#javascript #immer #redux #미들웨어