스프레드 연산자로 효율적인 리듀서 만들기

상태 관리 리팩토링: 효율적인 리듀서 구현

DB에 정보를 넣기 위해서는 각각의 컴포넌트에서 store로 값을 받아와야 했는데,

기존에는 setClassId, setDateAndTime, setPriceAndQuantity와 같이 각각의 컴포넌트에서 값을 따로 받아와야 했기 때문에 상태 업데이트를 위한 리듀서를 각각 만들었다.

  setClassId: (classId) => {
    set((state) => ({
      reserveInfo: { ...state.reserveInfo, classId: classId }
    }));
  },
  setDateAndTime: (date, time) => {
    set((state) => ({
      reserveInfo: { ...state.reserveInfo, reserveDate: date, reserveTime: time }
    }));
  },
  setPriceAndQuantity: (totalPrice, quantity) => {
    set((state) => ({
      reserveInfo: { ...state.reserveInfo, reservePrice: totalPrice, reserveQuantity: quantity }
    }));
  },

근데 되게 비효율적인 것 같아서 어떻게 짜야 내가 업데이트할 인자만 전달하면 그 정보만 set이 될지 고민해보았다.

 

해결방법

해결방법은 스프레드 오퍼레이터였다. 업데이트할 인자만을 받아서 상태를 업데이트하는 방식으로 코드를 개선할 수 있었다. 

 

변경 된 코드

  setReserveInfo: (updateInfo) => {
    set((state) => ({
      reserveInfo: {
        ...state.reserveInfo,
        ...updateInfo
      }
    }));
    console.log(updateInfo);
  }
}));

 

updateInfo 인자 하나만 받게 하고,  

...state.reserveInfo를 사용하여 기존 상태의 모든 속성을 새 객체로 복사하고, updateInfo 속성만 새 값으로 덮어씌워 가져온 정보로 set된 새로운 객체를 만든다.

리듀서에는 setReserveInfo에 업데이트할 속성들만 포함된 객체를 전달하면 되고, 전달하지 않은 속성들은 기존 값이 유지된다.

  const setReserveInfo = useReserveClass((state) => state.setReserveInfo);
  setReserveInfo({ reservePrice: totalPrice, reserveQuantity: quantity });

 

실행순서

1. 기존 reserveInfo 상태의 모든 속성을 새 객체로 복사 (...state.reserveInfo).
2. updateInfo로 들어온 객체로 새 값을 할당
3. 만들어진 새 reserveInfo 객체로 기존 상태를 업데이트