TIL 23.02.27

오늘은 Redux 상태관리 실습의 추가적인 기능을 구현해보았다.

 

actions/index.js

 

action 부분에서는 Action 객체를 생성하는 액션 생성자 사용하여서 코드를 작성하였다.

 

addCart의 경우는 새롭게 추가될  itemId를 받아서

itemId와  1개의 수량을 나타내는 payload 객체, 알맞은 타입을 반환해주었다

 

removeFromCart의 경우는 삭제에 필요한 itemId를  받아서,

itemId를 나타내는 payload 객체와, 알맞은 타입을 반환했고,

 

setQuantity의 경우 수정할 itemId와 수량을 받아서,

itemId와 수량을 나타내는 payload 객체와 알맞은 타입을 반환해 주었다.

 

pages/ShoppingCart.js 

Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 useDispatch()와

최종적으로 Redux의 state에 접근할 수 있게 해주는 useSelector() 메소드를 사용하여, 

실제로 기능이 구현하게 하였다.

 

우선 useSelector()메소드를 사용하여 state에 Redux의 state.itemReducer에 접근할 수 있게 해주었다.

 

그 후, useDispatch()메소드를 사용하여 Reducer에 Action인자를 전달할 수 있게 dispatch를 선언해 준 뒤,

 

handleQuantityChange, handleDelete 함수를 안에서 dispatch를 실행시키고

dispatch 내부에서 action에서 작성했던 함수를 실행시켜, action 객체를 반환하며 Reducer에 action객체를 전달해준다.

 

위의 예시까지가 Redux의 코드를 분할하여 상태관리를 하는 예시였다.

 

실행 결과

장바구니에 추가, 삭제, 수량 설정까지 잘 되는 것을 볼 수 있다.