Immer는 JavaScript의 불변성을 관리하기위한 라이브러리입니다. 이 라이브러리는 Immer 미들웨어를 사용하여 Redux와 같은 상태 관리 라이브러리와 함께 사용될 수 있습니다. Immer가 제공하는 기능 중 하나는 불변성 관리를 자동으로 처리하는 것입니다. 그러나 때로는 Immer에 특정 동작을 추가하고 싶을 수 있습니다. 이를 위해 사용자 정의 Immer 미들웨어를 만들 수 있습니다.

먼저, 사용자 정의 Immer 미들웨어를 만들기 위해 다음 단계를 따라야 합니다:

1. Redux 미들웨어 생성
   • Immer 라이브러리를 사용하여 불변성을 관리하는 미들웨어를 생성합니다.

    const immerMiddleware = store => next => action => {
      const { type, payload } = action;
      switch (type) {
        case "UPDATE_DATA":
          const updatedData = produce(store.getState().data, draft => {
            draft.name = payload.name;
          });
          // 변경된 데이터로 상태 업데이트
          store.getState().data = updatedData;
          break;
        default:
          break;
      }
         
      return next(action);
    };
   

2. createStore 함수를 사용하여 스토어 생성
   • Redux의 createStore 함수를 사용하여 사용자 정의 미들웨어와 함께 스토어를 생성합니다.

   import { createStore, applyMiddleware } from 'redux';
   import { rootReducer } from './reducers';
      
   const store = createStore(
     rootReducer,
     applyMiddleware(immerMiddleware)
   );
   

3. 미들웨어 등록
   • Redux 미들웨어를 스토어에 등록하여 액션을 디스패치할 때마다 미들웨어가 실행되도록 설정합니다.

   import { Provider } from 'react-redux';
   import App from './App';
      
   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );
   

이제 사용자 정의 Immer 미들웨어를 만들고 등록했습니다. 이제 불변성을 관리하는 동안 추가 동작을 수행할 수 있습니다. 이를 활용하여 애플리케이션에서 상태 변화를 더욱 효과적으로 제어할 수 있습니다.

#Immer #Redux