Redux 로 장바구니 만들기 : 4

정지원·2021년 10월 23일
0

redux

목록 보기
4/6
post-thumbnail

redux에 데이터를 만들때
state가 필요하면 이런식으로 만들면 된다고 배웠다
중요한 데이터를 수정할땐 카피본을 만들어서 하는것 또한 잊지말고!

지금까지 우리는 dispatch로 수정하라고 명령만 내려주었다
이제는 dispatch()로 수정요청 할 때, 데이터도 같이 보내보자!
흔히 payload "화물(데이터)을 올려서 보낸다" 라고 쓴다
먼저 !!
우리가 dispatch로 보내는 모든 데이터들은 액션이라는 파라미터에 저장된다
이걸 기억해두고 이제 각 상품마다 장바구니 추가버튼을 제작해보자
Detail.js로 이동하자 !
저기 빨간색 버튼옆에 새롭게 장바구니 버튼을 만들건데
그 버튼을 누르면 index.js에 있는 초기값 데이터에 상품이 더 추가되도록 할거다.
reducer로 데이터 수정하는법을 만들고, 요청하는거 ! 기억하셔야 합니다 !

기존에 있던 reducer 추가해주면 된다
액션의 이름을 '항목추가'라고 지어주면, 이제 어디선가 '항목추가'라는 요청을 할수있다.

카피본을 만들어주고, 여기에 새로운 항목을 넣어줄거다
항목을 넣어줄때는 dispatch()를 통해 추가할 데이터를 함께 보내보자
Detail.js로 와서 주문하기 버튼을 누르면 이제 장바구니에도 추가가 되게끔 데이터 전송을 해보자. 근데 이렇게만하면 에러가 난다 ! 왜냐하면 Detail.js랑 index.js랑 서로 다른파일이기에 Detail.js에서 store를 사용하고싶다면 이전에 cart.js에 설치해준것과 같이 입력해주어야 한다
마지막 괄호에는 Detail로 바꿔주는것도 잊지말자, 그리고 connect라는 함수를 쓸 때는상단에 import 해주는것 또한 잊지말자
이제 버튼으로 와서 dispatch할때마다 보내줄 데이터를 만들면

항목추가라는게 실행될 때 마다 복사본state에 payloda에 있는 데이터를 push(추가) 해준다.
그리고서 그 값을 다시 퉤 뱉어준다 !
근데 이렇게 추가하고 cart페이지에 가서 보면 추가가 안된걸로 보이는데
이거는 페이지 이동시에 새로고침이 되면서 redux도 기본값으로 초기화가 된다
그래서 사라지는거임 ! 이거를 방지하고 싶으면

history.push() 훅을 사용하시면 된다, 이렇게하면 reset없이 데이터를 유지할수 있게 된다
이렇게 여기까지하면 이제 주문하기 버튼을 누르면 ! 페이지 이동을 하며 장바구니에 추가가 된다 ! 짜잔 !

근데 만약에 동일한 상품을 여러개 추가하고싶은데, 누를때마다 새로운 항목칸이 생기는거를 방지하려면? 그리고 임시상품명 말고 실제 상품명 데이터를 넣으려면 어떻게 해야하까? 이건 고민해서 풀어보자...

profile
강의보며 공부하고, 개인/팀 프로젝트 준비하는 개발일지 입니다;

0개의 댓글