[💻 코드스테이츠 FE 44기]Redux 과제

✔️ 시작

저번 학습 시간에 이어 Redux 과제를 진행하면서
알게된 점과 중요하다 생각하는 점을 같이 작성해 주었다.

📍 알게된 점

• Action의 type은 변수로 관리한다.
• 오타 방지, 자동 완성, 재사용성에 용이하다.

const ADD_TO_CART = "ADD_TO_CART";
const REMOVE_FROM_CART = "REMOVE_FROM_CART";
const SET_QUANTITY = "SET_QUANTITY";

• 외부에 사용해야할 코드에 export를 작성해 주면 된다.
• Action payload에 인자를 넣어줄 수 있다.

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

• state를 수정할 땐 원본을 훼손하지 않아야 한다.(깊은 복사로 수정하기)
• filter는 새로운 배열을 반환한다.
• spread syntax, Object.assign을 사용하는 방법도 있다.

const closed = state.cartItems.filter(el => el.itemId !== action.payload.itemId)
return {...state, cartItems: closed}

• Reducer함수의 첫번째 인자는 state를 주는데 기존 값을 설정해 주어야 한다. (안그러면 undifined)

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

• 이벤트 핸들러 인자를 순서대로 작성할 필요는 없다.
• 이벤트 발생하는 곳에서 dispatch가 사용 된다.

export const setQuantity = (itemId, quantity) => {
  return {
    type: SET_QUANTITY,
    payload: {
      itemId,
      quantity
    }
  }
}
.
.
.
// Action payload 지정한 순서대로 작성해 주면 된다.
const handleQuantityChange = (quantity, itemId) => {
dispatch(setQuantity(itemId, quantity))
}

✏️ 마치며

Redux는 라이브러리로 React 말고도 JavaScript에서도 사용이 가능하다.
React에서 Redux를 사용해 상태를 간단하게 관리할 수 있었다.

Redux는 상태 관리가 자주 발생하고 props를 전달하는 컴포넌트가 많으면
사용하기 좋을 듯 싶다.