dispatch

박시하·2021년 12월 1일
0

React

목록 보기
16/17

dispatch

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에 추가해줍니다.

〰 useSelector

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 )
  1. useSelector() 라는 함수를 import 해오시고
  2. useSelector() 안에 콜백함수하나만 적습니다.
state.reducer.map((a,i)=>{

❗ props 대신 srate을 사용한다

〰 useDispatch 사용하는 법

dispatch() 하고싶으면 useDispatch로 가져오면 됩니다

import { useSelector, useDispatch } from 'react-redux';
function Cart(props) {
  let state = useSelector((state) => state )
  let dispatch = useDispatch()

❗ props.dispatch()로 state 수정요청 날리던걸
dispatch() 만으로 간단하게 사용할 수 있습니다.

profile
기본 회원

0개의 댓글