Section3 Unit4 [React] 상태 관리 - 과제 Cmarket Redux

---

Section3 Unit4 [React] 상태 관리 - 과제 Cmarket Redux

 

⭐️ 과제. Cmarket Redux

✔️ Bare Minimum Requirement

✅ Action, Reducer를 직접 작성하고 테스트 케이스를 통과합니다.

 

✏️ 과제 구현

📌 리덕스의 데이터 흐름 Action → Dispatch → Reducer → Store

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성

2. Action 객체는 Dispatch 함수의 인자로 전달

3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달

4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경

5. 상태가 변경되면 React는 화면을 다시 렌더링

 

✨ handleClick, handleQuantityChange, handleDelete

장바구니 담기 or 수량 변경 or 삭제 버튼을 눌렀을 때

// ItemListContainer.js

// 📌 장바구니 담기 버튼을 눌렀을 때
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 handleQuantityChange = (quantity, itemId) => {
  //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
  dispatch(setQuantity(itemId, quantity))
}

// 📌 삭제 버튼을 눌렀을 때
const handleDelete = (itemId) => {
  setCheckedItems(checkedItems.filter((el) => el !== itemId))
  //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
  dispatch(removeFromCart(itemId))
}

// actions > 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";

// 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
    }
  }
}

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

  }
}

// reducers > 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:
      //TODO
      return Object.assign({}, state, { cartItems: [...state.cartItems, action.payload] })
      
      // Spread Syntax
      // return { ...state, cartItems: [...state.cartItems, action.payload] }

    case REMOVE_FROM_CART:
      //TODO
      const updatedItems = state.cartItems.filter((item) => item.itemId !== action.payload.itemId);

      console.log(action.payload.itemId) // 삭제할 제품의 itemId
      console.log("updatedItems", updatedItems) // 제품이 삭제된 후의 리스트

      return Object.assign({}, state, { cartItems: updatedItems })

    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)]
      })

      // Spread Syntax
      /*
      return { 
        ...state,
        cartItems: [...state.cartItems.slice(0, idx), action.payload, ...state.cartItems.slice(idx + 1)]
      }
      */
      
      // map
      /*
      return {
        ...state,
        cartItems: state.cartItems.map((el, index) => index === idx ? action.payload : el)
      }
      */

      // map (idx 사용 X)
      /*
      return {
        ...state,
        cartItems: state.cartItems.map((el) => el.itemId === action.payload.itemId ? action.payload : el)
      }
      */
     
     
    default:
      return state;
  }
}

export default itemReducer;

 

 Reducer의 Immutability(불변성)

 Redux의 state 업데이트는 immutable한 방식으로 변경해야 하기 때문에 Reducer 함수를 작성시 주의해야 한다.

 immutable한 방식으로 state를 변경하기 위해서는 Object.assign() 또는 spread syntax를 사용할 수 있다.

 

---

🌙  오늘의 회고

 이렇게 한 주가 벌써 끝이 났다. 이번 주는 리액트로 custom component 만들기부터 리덕스까지, 배워야 할 것들도 많았고, 배울 것이 많으니 정리해야 할 부분도 많았다. 꾸준히 습관처럼 하던 블로깅도 제대로 못하고, 아직 노션 정리도 제대로 못해서 주말동안 열심히 정리를 해볼 생각이다. 부트캠프 TIL 블로깅은 사실 나중에 면접 자리에서 성실성을 조금이나마 보여주기 위해 시작한 이유도 있었는데, 지금은 약간 습관처럼 뭐라도 기록해두는데 의의를 두는 것 같다. 블로그보다는 노션에 거의 모든 것을 기록해두어서 인지 블로그에 너무 많은 시간을 쏟지는 않으려 하고 있다. (그래도 역시 남들이 볼 수 있는, 발행이 되는 글이라 신경이 쓰이는 건 맞는듯!) 여튼 공부한 내용을 정리하고, 기록해두는건 정말 좋은 습관 같다. 하지만 이것도 나름 시간이 걸리는 작업이라 정리할 부분은 정리하고, 우선 넘어갈 부분은 키워드라도 써놓는게 좋은 것 같다는 생각이 들었다. 그래도 노션에 정리를 해두면 필요할 때 언제든지 바로 검색해서 찾을 수가 있다는 점은 장점이다.

 여튼 나는 아직 리덕스를 파악하는 중이다. 오늘 마저 강의를 보고, 과제를 다시 한 번 해봐야겠다.

 

 🗓️ 23.6.25 SUN

 리덕스를 차근차근 다시 공부해보고 과제를 다시 구현해보았다. 리덕스가 실행되는 로직과, 코드를 작성하는게 익숙치 않아서 어려웠던 과제가 이번엔 훨씬 수월하게 느껴져서 금방 완성할 수 있었고, 이해도 훨씬 잘되는 듯 했다. 학습차원에서 제공된 코드 중 이미 나누어진 폴더구조와 작성되어져 있는 일부 코드를 보며 불편함도 느꼈다. 폴더구조가 여러개로 나눠지고, 반복적인 코드가 생긴다는 것이 무엇인지 이해가 되었고, 이러한 부분들을 개선하여 리덕스를 좀 더 편하게 사용할 수 있는 방법이 Redux Toolkit을 이용하는 것이라고 했던 것 같다. 이제 드디어 Redux Toolkit도 보러 가야겠다..😊