export const cartsSlice = createSlice({
  name: CARTS,
  initialState: {
    carts: {
      value: [],
      isLoading: false,
      hasError: false,
      error: null,
    },
  } as CartsReducerState,
  reducers: {

export interface CartsReducerState {
  carts: BaseRequestReducerState<CartItem[]>;
}

export interface CartItem {
  id: number;
  quantity: number;
  product: CartItemProduct;
}

export interface BaseRequestReducerState<T> {
  value: T;
  isLoading: boolean;
  hasError: boolean;
  error: Error | null;
}

대충 이런 식으로 리덕스 스토어의 상태가 저장되어 있음. 대충 carts.value 값을 살펴보면 아래와 같은 형태이다

// carts.value 의 모양 
[
  {
    id: 1, // cart id
    quantity: 1, // cart quantity

    product: {
      id: 1, // 상품 id
      name: '[리뉴얼]젓가락(종이)-정성을 담아', // 상품 id
      price: 21800, // 상품 price
      imageUrl: '<https://cdn-mart.baemi>' // 상품 image
    },
  },
];

이런식으로 장바구니(carts) 부분을 작업했고, 이제 주문 목록(orders)를 작업하고 있다. 근데 서버로 부터 날라오는 장바구니 데이터를 보니 아래와 같은 형태이다.

// orignial orders from the db 
"orders": [
    {
      "id": 1,
      "orderDetails": [
        {
          "id": 1, // 상품 id
          "name": "[리뉴얼]젓가락(종이)-정성을 담아", // 상품 name
          "price": 21800, // 상품 price
          "imageUrl": "<https://cdn-mar>, // 상품 image
          "quantity": 5                // product와는 조금 어울리지 않은  
        },
      ]
    }
  ]

• orderDetails를 보면 이전에 저장한 redux-store의 carts와 미묘하게 다름
• orderDetatils의 아이템을 더 추상화 하면 redux-store의 carts와 비슷하게 맞출 수 있을 것 같음
• 이렇게 할 경우 product(상품정보)를 props로 받는 Product 컴포넌트(이전에 구현한)를 깔끔하게 재사용 할 수 있을 것 같음(product props 타입을 맞춰주는 로직을 리액트 컴포넌트에서 제거 할 수 있음) → 최대한 컴포넌트가 바보같이 받아서 → 보여주는 역할만 하게끔 하자!!

그래서 아래와 같은 형태로 만들고자 했다.

export const ordersSlice = createSlice({
  name: ORDERS,
  initialState: {
    orders: {
      value: [],
      isLoading: false,
      hasError: false,
      error: null,
    },
  } as OrdersReducerState,

export interface OrdersReducerState {
  orders: BaseRequestReducerState<OrderItem[]>;
}

export interface OrderItem {
  id: number;
  orderDetails: OrderDetail[];
}

export interface OrderDetail {
  product: Product;
  quantity: number;
}

// new orders 
"orders": [
    {
      "id": 1,
      "orderDetails": [{
        "product":{
	          "id": 1, // 상품 id
	          "name": "[리뉴얼]젓가락(종이)-정성을 담아", // 상품 name
	          "price": 21800, // 상품 price
	          "imageUrl": "<https://cdn-mar>, // 상품 image
        },
         "quantity": 5
      }]
    }
  ]

와 같이 변경했다.

이렇게 변경하니 orderDetails 안에 product에 대한 정보 그리고 그 product의 개수를 명확하게 분리 할 수 있었다. 그리고 이렇게 명확한 분리로 presentational 컴포넌트에서 별다른 데이터 변환 없이 바로

{products.map(product => <Product product={product} />)}