Redux dispacth로 수정할 때 데이터보내기

dispatch()로 수정요청할 때 데이터를 보낼 수도 있다. 

dispatch({ type : 어쩌구, payload : 보낼데이터 })이게 기본형태이다. 보낸 자료는 액션 파라미터에 저장되어 있다.

액션 파라미터는 { type : 어쩌구, payload : 보낼데이터 }을 뜻하고,

 

reducer에서 액션.payload이렇게 꺼낼 수 있다.

 

주문하기를 누르면 초기값 오브젝트에 상품이 담기는 것을 구현해보자

1. 데이터 수정되는 방법을 정의해야 한다.

let 기본state = [
  { id : 0, name : '멋진신발', quan : 2 }, 
  { id : 1, name : '멋진신발2', quan : 1}
]; 

function reducer(state = 기본state, 액션) {
  if ( 액션.type == '항목추가' ) {
    let copy = [...state]; //state 사본을 미리 만들고
    copy.push(???)  //사본에 push를 이용해 추가함
    return copy
    
  } else if ( 액션.type === '수량증가' ) {
    let copy = [...state];
    copy[0].quan++;
    return copy
  } else if ( 액션.type === '수량감소' ) {
    let copy = [...state];
    if (copy[0].quan > 0) {
      copy[0].quan--;
    } else {
      copy[0].quan = 0;
    }
    return copy
  } else {
    return state
  }
}

이렇게 써서 사본에 push를 써서 추가할 데이터는 dispatch할 때 보내기로 하자.

 

2. 데이터를 dispatch할 때 보내야한다.

<button className="btn btn-danger" onClick={()=>{
              props.dispatch({ type : '항목추가', payload : {id :2, name:'새로운상품', quan:1} });
 }}>주문하기</button>

버튼을 클릭하면 type : '항목추가'라는 액션을 하면서 payload라고 이름지은 오브젝트를 전송한다. (해당 파일 밑에는

function state를props화(state) {

  return {

      state : state.reducer,

      alert : state.reducer2

  }

}

export default connect(state를props화)(Detail)

가 적혀있어야 dispatch를 사용할 수 있음)

 

3. 데이터를 받기

if ( 액션.type == '항목추가' ) {
    let copy = [...state]; //state 사본을 미리 만들고
    copy.push(액션.payload)  //사본에 push를 이용해 추가함
    return copy
    
  }

이렇게 액션.payload를 써준다. 여기서 액션은 dispatch에 들어가는  { } 오브젝트이다.

 

그러면 전에 개발한거에 의해 Cart페이지에 자동으로 추가가 된다. 리액트 환경에선 새로고침이 되면 자동으로 데이터가 사라지기 떄문에 위의 사이트 주소를 옮겨서 확이하려면

개발환경에서 페이지 이동시 강제새로고침 안되게 하는 useHistory()훅 을 사용해준다.

history.push('/cart');