let copy = [...state]; copy.push(음 버튼누를 때 전송된 데이터?); return copy;
<button onClick={()=>{ props.dispatch( {type : '항목추가'} ) }}>주문하기</button>
❗ '항목추가' 라는 요청이 들어오면 카피본을 생성해서 전송받은 데이터를 push
props.dispatch({type : '항목추가', payload : {id : 2, name : '새로운상품', quan : 1} })
❗ dispatch 하실 때 안에 type말고 payload라는 항목을 신설해주시면 됩니다.
(payload 말고 다른 이름 작명도 가능
이 항목에는 여러분이 redux store로 전달할 데이터를 작성가능합니다.
버튼을 누를 때마다 {id : 2, name : '새로운상품', quan : 1} 이런 데이터가 redux로 보내집니다.
let copy = [...state]; copy.push(액션.payload); return copy;
액션.payload라고 쓰시면 아까 dispatch할 때 실어보냈던 데이터가 나옵니다.
그걸 state에 추가하는 기능을 생성
이제 버튼을 누르면 '항목추가' 요청을 dispatch 하게되고 데이터를 실어보냅니다.
reducer에선 그 데이터를 state에 추가해줍니다.
function state를props화(state){ return { state : state.reducer, alert열렸니 : state.reducer2 } } export default connect(state를props화)(Cart)
useSelector Hook사용
import { useSelector } from 'react-redux'; function Cart(props) { let state = useSelector((state) => state )
- useSelector() 라는 함수를 import 해오시고
- useSelector() 안에 콜백함수하나만 적습니다.
state.reducer.map((a,i)=>{
❗ props 대신 srate을 사용한다
dispatch() 하고싶으면 useDispatch로 가져오면 됩니다
import { useSelector, useDispatch } from 'react-redux'; function Cart(props) { let state = useSelector((state) => state ) let dispatch = useDispatch()
❗ props.dispatch()로 state 수정요청 날리던걸
dispatch() 만으로 간단하게 사용할 수 있습니다.