💡 1. Action

어떤 액션을 취할 것인지 정의해 놓은 객체입니다.

payload

전송되는 데이터를 의미합니다. 데이터를 전송할 때, 다양한 요소들을 함꼐 보내어, 데이터 전송의 효율과 안정성을 높히게 됩니다. 이때, 보내고자 하는 데이터 자체를 의미합니다.

Test case
Shopping Cart Actions

• addToCart는 ADD_TO_CART 액션을 생성해야 합니다.
• removeFromCart는 REMOVE_FROM_CART 액션을 생성해야 합니다.
• setQuantity는 SET_QUANTITY 액션을 생성해야 합니다.

코드 작성 시 유의사항

• type은 필수로 지정해야 합니다.
• type은 대문자와 Snake Case로 작성해야 합니다.
• payload는 action의 type에 따라서 state 값을 가지고 있어야한다.
• 쇼핑카트에 추가, 삭제, 변경할 값을 정할 때, 필요한 값을 payload에 넣어줍니다.

actions/index.js

export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId
    }
  }
}
export const removeFromCart = (itemId) => {
  return {
    //TODO
    // 유어클래스 action 예시 참고 
    type : REMOVE_FROM_CART,
    payload : {
      itemId
    }
  }
}
export const setQuantity = (itemId, quantity) => {
  return {
    //TODO
    type : SET_QUANTITY,
    payload : {
      quantity,
      itemId
    }
  }
}

💡 2. Reducer

Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수입니다.

Test Case
Item Reducer

• ADD_TO_CART 액션에 따라 cartItems 상태가 변해야 합니다.
• REMOVE_FROM_CART 액션에 따라 cartItems 상태가 변해야 합니다.
• SET_QUANTITY 액션에 따라 cartItems 상태가 변해야 합니다.
• 리듀서는 다른 상태의 값을 보존해야 합니다.

코드 작성 시 유의사항

• 상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 합니다.
• Action 객체의 type 값에 따라 분기하는 switch 조건문을 사용해야 합니다.

itemReducer.js

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      //TODO
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload]
      })
      break;
    case REMOVE_FROM_CART:
      //TODO
      let currentItem = state.cartItems.filter( el => el.itemId !== action.payload.itemId)
      return Object.assign({}, state, {
        cartItems: currentItem
      })
      break;
    case SET_QUANTITY:
      let idx = state.cartItems.findIndex(el => el.itemId === action.payload.itemId)
      //TODO
      return {
        ...state,
        cartItems: [...state.cartItems.slice(0, idx), action.payload, ...state.cartItems.slice(idx + 1)]
      }
      break;
    default:
      return state;
  }
}

💡 3. Dispatch

Reducer로 Action을 전달해주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달됩니다.

Test Case
Shopping Pages

• ShoppingCart에 cartItems가 렌더되어야합니다.
• ADD_TO_CART 액션에 따라 ShoppingCart가 렌더되어야 합니다.
• REMOVE_FROM_CART 액션에 따라 ShoppingCart가 렌더되어야 합니다.
• SET_QUANTITY 액션에 따라 OrderSummary가 렌더되어야 합니다.
• Checkbox의 상태에 따라 OrderSummary가 렌더되어야 합니다.

코드 작성 시 유의사항

• 액션 생성자를 사용하여 코드를 작성해야 합니다.
• 요청을 useDispatch()로 보내주어야 합니다.
• handleClick 함수 안에 dispatch로 함수를 실행시켜 주어야 합니다.

ItemListContainer.js

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('이미 추가된 상품입니다.'))
    }
  }

ShoppingCart.js

const dispatch = useDispatch();
const handleQuantityChange = (quantity, itemId) => {
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(setQuantity(itemId, quantity)) 
  }
  const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el !== itemId))
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(removeFromCart(itemId)) // 카트(장바구니)안에서 삭제될 아이템 요청
  }

---

오늘 학습을 마치고 나서, 📖

Action 부분과 Dispatch 부분은 어느정도 이해가 되고 코드 작성하는 데 문제가 없었지만, Reducer 부분을 작성할 때, 배운 개념과 조금 달라 작성하는데 시간이 다소 걸렸다. Object.assign을 왜 쓰는지, 필요한 이유는 무엇인지에 대해 궁금했다. 대략적인 이유는 찾았지만 정확하게 이유는 알지 못 하였다. 이 부분은 좀 더 학습 해야겠다. 그리고 Redux 부분은 미니 프로젝트에서도 쓰이고 있기 때문에 어떠한 형식을 띄고 있는 건지는 파악할 수 있을 것 같다. 그러면서 Redux에 대한 내용을 잘 이해하면 되지 않을까 싶다. 미니 프로젝트도 열심히 만들어보자.