주문하기 누르면 재고(state) -1 되게 하기 -> useState
컴포넌트 마다 상태를 props로 전송해야 하는 번거로움.
>>>>그래서 ... 리덕스 사용 (redux tookit)
세팅 :
1. app/store.js 파일 생성 (export default store)
2. index.js 에서 최상단 컴포넌트(<App>)를 <Provider store={store}>으로 묶음. ->모든 컴포넌트들이 store의 state를 사용할 수 있게 됨. Provider
step1) Cake 컴포넌트 뼈대 작성
step2) cakeSlice 설정 createSlice
- state 이름, 초기 state값 설정
- state값을 변경하는 action 설정
(export default cakeSlice) 또는 (store.js에 state따로, 컴포넌트에 action 따로 export)
step3) store.js 에 state 등록 (state 모음집) configureStore
- slice에서 가져온 cakeSlice.reducer 등록. 작명필요
step4) Cake 컴포넌트에서 state 사용 useSelector, action사용 useDispatch
- useSelector ( state=>state ) 로 가져온 state는 store에 있는 모든 상태값 객체. 이 중에서 사용하 state 선택하여 변수설정.
- const dispatch = useDispatch(); 선언 후 slice에서 import해온 action 사용 시 dispatch()안에 전달해서 사용.