[React] Redux를 이용한 상태관리 과제

Shopping Cart Actions

actions에 원하는 타입과 값을 작성 해준다.

export const addToCart = (itemId) => {
  return {
    // TODO
    type: ADD_TO_CART,
    payload: {
      itemId,
      quantity: 1,
    }, // addToCart()는 액션 타입을 'ADD_TO_CART'으로 지정 해주고
       // 장바구니에 들어갈 인자로받은 새로운 itemId가 들어가고 갯수로 올라갈 quantity는 초기값 1로 지정해준다.
  };
};

export const removeFromCart = (itemId) => {
  return {
    //TODO
    type: REMOVE_FROM_CART,
    payload: {
      itemId,
    },
    // removeFromCart()는 액션 타입을 'REMOVE_FROM_CART'으로 지정 해주고
    // 장바구니에서 삭제를 해주는 함수로 사용되기 때문에 삭제할 itemId를 이용한 값을 전달 해준다.
  };
};

export const setQuantity = (itemId, quantity) => {
  return {
    //TODO
    type: SET_QUANTITY,
    payload: {
      itemId,
      quantity,
    },
    // removeFromCart()는 액션 타입을 'REMOVE_FROM_CART'으로 지정 해주고
    // 장바구니에서 수량을 올리는 함수로 사용되기 때문에 수정되야될 인자로 받는 itemId, quantity를 넣어준다.
  };
};

Item Reducer

액션타입을 불러왔을때 어떤식으로 변할것인지를 작성 해준다.

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      //TODO
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload],
      };
// 'ADD_TO_CART'는 장바구니담기 버튼을 눌렀을때 장바구니에 물건이 담기고 물건이 담긴다는 것은
// initialState의 cartItems에 새로운 itemId가 담긴다는것을 의미한다.
      
    case REMOVE_FROM_CART:
      //TODO
      return {
        ...state,
        cartItems: [
          ...state.cartItems.filter(
            (el) => el.itemId !== action.payload.itemId
          ),
        ],
      };
// 'REMOVE_FROM_CART'는 장바구니 삭제버튼에 들어가야 함으로 filter메서드를 이용해 
// state.cartItems 배열을 삭제버튼과 같지 않은 배열들만 다시 리턴 해주면 없에고싶은 배열만 제외한 새로운 배열이 나오게 된다.
    
    case SET_QUANTITY:
      let targetidx = state.cartItems.findIndex(
        (el) => el.itemId === action.payload.itemId
      );
      //TODO
      return {
        ...state,
        cartItems: state.cartItems.map((el, idx) =>
          idx === targetidx ? action.payload : el
        ),
      };
// 'SET_QUANTITY'는 장바구니에서 물건 수량을 올릴때 사용한다.
// map메서드를 이용해 state의 인덱스 값과 targetidx의 값이 같을경우 
// action.payload를 배열로 바꿔주고 아닐경우 state.cartItems로 그대로 사용한다.
    
    default:
      return state;
  }
};

Shopping Pages

실제로 작동할 함수 내부에 dispatch를 이용해 변경될 state를 불러준다.

const handleQuantityChange = (quantity, itemId) => {
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(setQuantity(itemId, quantity));
  };
// setQuantity를 불러주고 들어갈 인자의 순서를 알맞게 넣어줬다.

const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el !== itemId));
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(removeFromCart(itemId));
  };
// removeFromCart를 불러주고 들어갈 인자값을 넣어준다.