[React] Redux 를 이용하여 장바구니 상품 담기 및 수량 변화.

 

 

💡 Redux를 이용해서 장바구니 수량 변화 적용

---

 

redux  의 state 값을 변경하기 위하여 slice 파일에 reducers에 증가함수를 추가해준다

 

이때 변경할 곳에서 

useSelector 와 useDispatch 를 임포트 해주고

 

데이터 값을 받아올 때 배열의 순서가 아닌 id 값으로 상품을 컨트롤 해주면 훨씬 더 정확한 수행을 할것이다.

 

따라서 payload 로 전송해주는 값을 id값으로 전송을 해준다.

 

그 전에 변경 함수를 export 해주고 import 해주는 것을 잊지말자.

받은 배열의 id 값을 이용해서 카트에 있는 id 값이 동일한 배열을 가져오면 된다.

 

이때 이용할 수 있는 기능이

 

findIndex 를 이용할 수 있다.(내부의 조건에 일치하는 배열을 순서반환)

이렇게 id 값이 동일한 배열의 순서를 찾아주고 그 값을 넣어서 count 를 1 증가시킨다.

 

같은 방법으로 상품의 개수를 1빼보는 state 변경함수를 추가해보자.

이렇게 바꾸고자 하는 부분의 코드를 적용해주고

slice 파일에서

동일하게 적용해주면 된다. 여기서 조건문은 카트에 있는 상품의 크기가 1보다 작으면 안되기 때문에 넣어줬다.

 

 

 

💡 장바구니에 상품을 추가하기.

---

 

이번엔 상품을 추가해보자.

 

 이번에 변화 함수에 payload로 배열 즉 상품 데이터를 넘겨주면 된다.

 

redux를 통해서 정보를 받고자 하는 곳에

 

마찬가지로 useDispatch 와 useSelector 를 import 해주고 각각 변수에 넣어주고

 

 

위에서 말한대로 payload에 추가하고자 하는 상품 데이터를 전부 넘겨준다.

 

기존의 배열에 다른 값을 추가해 줄때는 push 를 사용한다.

 

푸시를 통해서 해당 데이터를 넣어주면

 

이렇게 cart에 상품들이 적용되어있는 것을 확인 할 수 있다.

 

 

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의 2-3 강 입니다.

https://codingapple.com/ 알아야할 핵심내용을 쉽게 설명해주시는 강의 같습니다.