Redux의 주요 개념

1. Action

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

• 어떤 액션을 취할 것인지 정의해 놓은 객체
• type은 필수로 지정, 그 외의 것들은 선택적으로 사용

2. Dispatch

const dispatch = useDispatch()

dispatch(addToCart(item.id))
dispatch(removeFromCart(itemId))
dispatch(notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`))

• Action을 전달하는 메소드
• dispatch의 전달인자로 Action 객체가 전달
• Reducer를 호출해 state의 값을 바꾸는 역할 수행

3. Store

const store = createStore(rootReducer)
// createStore 메소드를 활용해 rootReducer를 연결

• state가 관리되는 오직 하나뿐인 저장소
• createStore 메소드를 활용해 reducer를 연결할 수 있음
• createStore와 더불어 다른 리듀서의 조합을 인자로 넣어 스토어 생성 가능

4. Reducer

const itemReducer = (state, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
        // Object.assign() : immutable한 방식으로 변경하기
        cartItems: [...state.cartItems, action.payload]
      })
    default:
      return state;
  }
}

• 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 pure function
• switch문 또는 if문을 통해 코드 작성

Reducer의 Immutability(불변성)

: Redux는 변경된 state를 로그로 남기기 위해 immutable한 방식으로 변경해야 함
*mutable하게 고치면 기존 state가 어땠는지에 대한 트래킹 불가

Redux hooks

1. useSelector()

const state = useSelector((state) => state.itemReducer)

• 컴포넌트와 state를 연결하는 역할 수행
• 컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근
• useSelector의 전달인자로는 콜백 함수를 받으며 콜백 함수의 전달인자로는 state 값이 들어감

2. useDispatch()

• Action 객체를 Reducer로 전달해주는 메소드
• Action이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트