S3) Unit 4. [실습] CMarket Redux

📣  CMarket의 상태를 Redux로 관리해보자

  ✔️ Shopping Cart Actions
    ✓ addToCart는 ADD_TO_CART 액션을 생성해야 합니다 (4 ms)
    ✓ removeFromCart는 REMOVE_FROM_CART 액션을 생성해야 합니다 (13 ms)
    ✓ setQuantity는 SET_QUANTITY 액션을 생성해야 합니다 (2 ms)

  ✔️ Item Reducer
    ✓ ADD_TO_CART 액션에 따라 cartItems 상태가 변해야 합니다 (4 ms)
    ✓ REMOVE_FROM_CART 액션에 따라 cartItems 상태가 변해야 합니다 (2 ms)
    ✓ SET_QUANTITY 액션에 따라 cartItems 상태가 변해야 합니다 (2 ms)
    ✓ 리듀서는 다른 상태의 값을 보존해야 합니다 (2 ms)
 

✔️ Shopping Pages

    ✓ ShoppingCart에 cartItems가 렌더되어야합니다. (134 ms)
    ✓ ADD_TO_CART 액션에 따라 ShoppingCart가 렌더되어야 합니다. (103 ms)
    ✓ REMOVE_FROM_CART 액션에 따라 ShoppingCart가 렌더되어야 합니다. (31 ms)
    ✓ SET_QUANTITY 액션에 따라 OrderSummary가 렌더되어야 합니다. (26 ms)
    ✓ Checkbox의 상태에 따라 OrderSummary가 렌더되어야 합니다. (176 ms)

---

📣  구현 코드

✔️ InitialState 에는 전체 아이템 'items'와 장바구니에 담긴 아이템 'cartItems' 이 담겨있다.

 

1️⃣ index.js 

➰ 액션 타입 정의, 액션 생성 함수 정의

// action types
export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";
export const SET_QUANTITY = "SET_QUANTITY";
export const NOTIFY = "NOTIFY";
export const ENQUEUE_NOTIFICATION = "ENQUEUE_NOTIFICATION";
export const DEQUEUE_NOTIFICATION = "DEQUEUE_NOTIFICATION";

// actions creator functions
export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId
    }
  }
}

export const removeFromCart = (itemId) => {
  return {
    //TODO
    type: REMOVE_FROM_CART,
    payload: {
      itemId: itemId
    }
  }
}

export const setQuantity = (itemId, quantity) => {
  return {
    //TODO
    type: SET_QUANTITY,
    payload: {
      itemId: itemId,
      quantity: quantity
    }
  }
}

export const notify = (message, dismissTime = 5000) => dispatch => {
  const uuid = Math.random()
  dispatch(enqueueNotification(message, dismissTime, uuid))
  setTimeout(() => {
    dispatch(dequeueNotification())
  }, dismissTime)
}

export const enqueueNotification = (message, dismissTime, uuid) => {
  return {
    type: ENQUEUE_NOTIFICATION,
    payload: {
      message,
      dismissTime,
      uuid
    }
  }
}

export const dequeueNotification = () => {
  return {
    type: DEQUEUE_NOTIFICATION
  }
}

➰ 액션 함수에는 어떤 액션을 실행할 건지에 해당하는 type과, 해당 액션과 같이 전달할 payload를 작성했다.

➰ payload 는 함수가 어떤 매개변수를 받고 있는지 확인하고 작성하면 좋다.

 

2️⃣ itemReducer.js

✔️ 액션을 리듀서에 전달하고, 리듀서는 이를 보고 스토어의 상태를 업데이트 한다.

✔️ 현재의 상태와 전달받은 액션을 참고해서 새로운 상태를 반환한다 -> 액션에 따라 상태를 어떻게 변화시켜서 반환할건지!

import { REMOVE_FROM_CART, ADD_TO_CART, SET_QUANTITY } from "../actions/index";
import { initialState } from "./initialState";

const itemReducer = (state = initialState, action) => {

  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
          cartItems: [...state.cartItems, action.payload]
        })
        // ADD_TO_CART 액션은 장바구니에 아이템을 추가하는 것이다.
        // state에는 기본 아이템 뿐만 아니라 장바구니 아이템도 포함되어 있다.
        // 원래 장바구니 아이템과 전달받은 아이템도 추가해서 cartItems를 갱신하고
        // assign을 써서 원래 state와 합친다.
        // 그러면 원래 state의 cartItems가 새로 갱신된 cartItems로 덮어쓰워진다.

      break;
    case REMOVE_FROM_CART:
      //TODO
      let removedCartItems = state.cartItems.filter((cartItem) => cartItem.itemId !== action.payload.itemId);
      return Object.assign({}, state, {
        cartItems: removedCartItems
      })
      // REMOVE_FROM_CART 액션은 장바구니에서 아이템을 삭제하는 것이다.
      // 변수 하나를 선언해서 삭제할 아이템이 제외된 배열을 넣는다.
      // 원래 state의 cartItems에 filter 메서드를 사용해서 전달받은 itemId와 다른 itemId를 가진 아이템들만 가져온다.
      // ADD_TO_CART와 마찬가지로 cartItems를 새로 선언한 변수로 갱신하고, assign으로 덮어씌운다.
      
      break;
    case SET_QUANTITY:
      let idx = state.cartItems.findIndex(el => el.itemId === action.payload.itemId)
      //TODO
	  return Object.assign({}, state, {
        cartItems: [...state.cartItems.slice(0, idx), action.payload, ...state.cartItems.slice(idx+1)]
       })
      // 수량을 증가시켜야 할 아이템의 idx가 이미 구해져있다.
      // cartItems을 0부터 idx까지 자른 배열, 수량이 변한 payload, idx뒤의 배열을 합쳐서 cartItems를 갱신해준다.
      // 결과적으로 내가 수량을 바꾸고 싶은 아이템의 수량만 바뀌어있다.

      break;
    default:
      return state;
  }
}

export default itemReducer;

 

 

3️⃣ ItemListContainer.js

✔️ 액션을 리듀서에 전달하기 위해서는 dispatch() 메소드를 사용해야 한다.

import React from 'react';
import { addToCart, notify } from '../actions/index';
import { useSelector, useDispatch } from 'react-redux';
import Item from '../components/Item';

function ItemListContainer() {
  const state = useSelector(state => state.itemReducer);
  const { items, cartItems } = state;
  const dispatch = useDispatch();

  const handleClick = (item) => {
    if (!cartItems.map((el) => el.itemId).includes(item.id)) {
      //TODO: dispatch 함수를 호출하여 아이템 추가에 대한 액션을 전달하세요.
      dispatch(addToCart(item.id));
      dispatch(notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`))
    }
    else {
      dispatch(notify('이미 추가된 상품입니다.'))
    }
  }

  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">쓸모없는 선물 모음</div>
        {items.map((item, idx) => <Item item={item} key={idx} handleClick={() => {
          handleClick(item)
        }} />)}
      </div>
    </div>
  );
}

export default ItemListContainer;

➰ dispatch 메서드를 사용해서 아이템 추가에 대한 액션을 전달한다.

➰ dispatch의 매개변수로 전달할 액션 함수를 준다.

➰ 그 액션함수는 필요한 정보를 매개변수로 받는다.

 

4️⃣ ShoppingCart.js

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { removeFromCart, setQuantity } from '../actions';
import CartItem from '../components/CartItem'
import OrderSummary from '../components/OrderSummary'

export default function ShoppingCart() {

  const state = useSelector(state => state.itemReducer);
  const { cartItems, items } = state
  const dispatch = useDispatch();
  const [checkedItems, setCheckedItems] = useState(cartItems.map((el) => el.itemId))

  const handleCheckChange = (checked, id) => {
    if (checked) {
      setCheckedItems([...checkedItems, id]);
    }
    else {
      setCheckedItems(checkedItems.filter((el) => el !== id));
    }
  };

  const handleAllCheck = (checked) => {
    if (checked) {
      setCheckedItems(cartItems.map((el) => el.itemId))
    }
    else {
      setCheckedItems([]);
    }
  };

  const handleQuantityChange = (quantity, itemId) => {
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(setQuantity(itemId, quantity));
  }

  const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el !== itemId))
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(removeFromCart(itemId));
  }

  const getTotal = () => {
    let cartIdArr = cartItems.map((el) => el.itemId)
    let total = {
      price: 0,
      quantity: 0,
    }
    for (let i = 0; i < cartIdArr.length; i++) {
      if (checkedItems.indexOf(cartIdArr[i]) > -1) {
        let quantity = cartItems[i].quantity
        let price = items.filter((el) => el.id === cartItems[i].itemId)[0].price

        total.price = total.price + quantity * price
        total.quantity = total.quantity + quantity
      }
    }
    return total
  }

  const renderItems = items.filter((el) => cartItems.map((el) => el.itemId).indexOf(el.id) > -1)
  const total = getTotal()

  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">장바구니</div>
        <span id="shopping-cart-select-all">
          <input
            type="checkbox"
            checked={
              checkedItems.length === cartItems.length ? true : false
            }
            onChange={(e) => handleAllCheck(e.target.checked)} >
          </input>
          <label >전체선택</label>
        </span>
        <div id="shopping-cart-container">
          {!cartItems.length ? (
            <div id="item-list-text">
              장바구니에 아이템이 없습니다.
            </div>
          ) : (
              <div id="cart-item-list">
                {renderItems.map((item, idx) => {
                  const quantity = cartItems.filter(el => el.itemId === item.id)[0].quantity
                  return <CartItem
                    key={idx}
                    handleCheckChange={handleCheckChange}
                    handleQuantityChange={handleQuantityChange}
                    handleDelete={handleDelete}
                    item={item}
                    checkedItems={checkedItems}
                    quantity={quantity}
                  />
                })}
              </div>
            )}
          <OrderSummary total={total.price} totalQty={total.quantity} />
        </div>
      </div >
    </div>
  )
}

➰ 3번과 마찬가지로 장바구니 아이템 삭제 액션, 수량 변경 액션을 dispatch로 전달해준다.

 

✔️ 시연화면은 CMarket Hooks과 같다!