Redux 로 장바구니 만들기 : 3

정지원·2021년 10월 23일
0

redux

목록 보기
3/6
post-thumbnail

useState로 만들어주면 안되고 변수로 담아주어야한다

이렇ㅔ store안에 state를 담아주고서 아래로 내려와서Provider로 감싸주고, 저렇게 store={store}라고 선언해주면 감싸준곳은 다 store를 쓸수있음

cart.js 로 넘어와서 props등록을 하면 index.js에서 만들어놓은 store를 사용할수있다.

여기까지가 지난시간까지 배운것 !

장바구니에 열고 닫을수있는 알람창을 하나 만들건데
우리는 이전에 ui 만들때는 useState로 저장해서 만드는걸로 알고있었다
이번에도 그렇게 해야하는데 어디에 만들건가?! 바로 이전 시간에 만든 store에 저장해보자

redux store에 state를 추가로 저장하고 싶다면 reducer()를 하나 더 만들자
이제 슬슬 익숙해질때가 됐다, 우리는 true, false로 상태를 보여주어야하니 기본값을 true로 넣어주도록하자

상단에 combineReducers 를 import 해주고우리가 만든 새로운 reducer2()를 store에서 사용하기 위해선 추가해주어야 하는데
combineReducers() 라는 함수를 사용해서 여러개를 집어넣을수 있다.
하지만 !! 이렇게만 쓰면 우리는 에러를 마주하게 된다 이렇게 어떤 reducer에서 받아올지 적어야 오류가 생기지않는다우리가 reducer로 받아온 것들은 props로 바꾼것이기에
상위 컴포넌트에서도 props를 사용해주어야 한다닫기 버튼을 만드려면 이제 모달창이 꺼져야하는데 reducer2의 값을 false로 바꿔주면 되겠지?
무언가를 닫고 ! 열고 ! 지우고 ! 수정해야할땐 꼭 ! !
수정하는 법을 만들고 dispatch를 하자
조건을 만들고(액션.type) "alert닫기 라는 요청이 들어오면 수행해주세요"라고 적어보자
이제 저 닫기 버튼을 누를때 "alert닫기" 요청을 하면 된다 !

이제 다시 버튼 부분으로 돌아가서
props로 받아와서 ! dispatch로 보내준다 ! 무엇을?
type : alert닫기 ( index.js 에서 설정해놓은것) 을 !
그러면 모달창이 쓕 닫힌다!

근데 여기서 흔히 하는 코딩실수들 !

저러한 state는 다른데서 쓰지않고, 독립적인 cart.js에서만 쓰지않나?
그런 경우에는 굳이 Redux에 저장할 필요없다 !

Redux는 여러가지 컴포넌트들에 공통으로 필요한 데이터를 저장하는 공간이다

조금조금씩 쓰는 데이터를 저장하기위한 공간이 아니다, 방금거와 같은 !!

하찮은(몇번 안쓰는) state들은 그냥 useState를 사용해서 만드는게 좋다 !

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

0개의 댓글