.addCase(`${getOrders.success}`, (state, { payload: { orders } }: PayloadAction<GetOrdersSuccessPayload>) => {
        state.orders.isLoading = false;
        state.orders.value = orders.map(({ id, orderDetails }) => ({
          id,
          orderDetails: divideProductAndQuantity(orderDetails),
        }));
      })

//

const divideProductAndQuantity = (lst: OrderDetailFromServer[]): OrderDetail[] => {
  return lst.map((orderItem) => {
    const { id, name, price, imageUrl, quantity } = orderItem;

    return {
      product: { id, name, price, imageUrl },
      quantity,
    };
  });
};

→

.addCase(`${getOrders.success}`, (state, { payload: { orders } }: PayloadAction<GetOrdersSuccessPayload>) => {
        state.orders.isLoading = false;
        state.orders.value = createRefinedOrders(orders);

//
const createRefinedOrders = (originalOrders: OrderItemFromServer[]) =>
  originalOrders.map(({ id, orderDetails }) => ({
    id,
    orderDetails: divideProductAndQuantity(orderDetails),
  }));

const divideProductAndQuantity = (originalOrderDetail: OrderDetailFromServer[]): OrderDetail[] => {
  return originalOrderDetail.map((orderItem) => {
    const { id, name, price, imageUrl, quantity } = orderItem;

    return {
      product: { id, name, price, imageUrl },
      quantity,
    };
  });
};

이렇게하는게 맞을까? 함수로 따로 분리해서 조금 더 선언적으로 읽을 수 있게끔 만든 것 같기는한데 이런 엔지니어링이 필요한지는 의문이다. 그래도 나는 이런 방식은 리듀서에서 어떤 작업을 하는지 더욱 더 잘 보여줄 수 있는 것 같기는 하다. “이 값이 새롭게 바뀐 데이터야, 그리고 새롭게 바뀐 데이터는 product와 quantity 로 나눠져서 만들어진 것 이야” 이렇게 설명 할 수 있어 좋은 것 같다. 리듀서 안에서 이 값이 어떤 방법으로 Product와 Quantity 를 나누게 되었는지는 관심사가 아니라고 생각한다.

나중에

나중에 생각해보니 이건 리듀서 보다는 서비스 로직쪽에 담는 것이 더 이상적으로 판단해 리듀서에서 → 서비스로 로직을 옮겨주었다. 그래도 저렇게 함수로 분리하는건 아직도 나에게는 만족스러운 방법인 것 같아 형태는 유지하고, 서비스쪽으로만 변경해주는 리팩토링을 해줬다.