Coding Apple, React 강좌 내용 정리.18 - 3.Redux : dispatch 재확인 등

dispatch 등, 기본내용 추가

 

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

dispatch( {type: ~ , payload: 전송할 데이터} )

보낸 자료는 액션 파라미터에 저장되어 있다.

// dispatch 전송 : id를 전송한다
<button onClick={
    ()=> { props.dispatch( {id:p.id, type:'수량증가'} ) }
}>+</button>

// reducer 관련
function reducer(state=초기값, 액션) {
  if (액션.type ==='수량증가') {
    let copy = [...state];

    copy[액션.id].quan++;
    return copy;
  }
  else if (액션.type === '수량감소') {
    let copy = [...state];
    
    if (copy[액션.id].quan > 0) {
      copy[액션.id].quan--;
    }
    return copy;
  }
  else {
    return state;
  }
}

 

state를 꺼내쓰는 방법 중 하나 : useSelector

let state = useSelector( (state[redux에 있던 모든 state] ) => state);

 

dispatch 하는 방법 중 하나 : useDispatch

import { connect, useDispatch, useSelector } from "react-redux";
...

let dispatch = useDispatch();
...

<button onClick={
    ()=> { props.dispatch( {id:p.id, type:'수량감소'} ) }
}>-</button></td>
=>
    ()=> { dispatch( {id:p.id, type:'수량감소'} ) }

 

분기식

컴포넌트안에선 if/else

function Component() {
	if (true) {
    	return <P>True</p>
    } else {
    	return null;
    }
}

jsx에선 삼항연산자

// 일반적으로 삼항 연산자 + 삼항연산자 중첩가능
function Component() {
	return (
    	<div> {
        	1===1 
            ? <p>True</p>
            : (
            	2===2 ? <p>222</p> : <p>else</p>
            )
        }
        </div>
    )
}

 

&& 사용

{ 1===1 && <p>True</p>

 

switch & case

function reducer(state, 액션){
  switch (액션.type) {
    case '수량증가' :
      return 수량증가된state;
    case '수량감소' : 
      return 수량감소된state;
    default : 
      return state
  }

 

enum : 오브젝트 자료형이용해서

var 탭UI = { 
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>
}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        탭UI[현재상태]
      }
    </div>

 

기본적으로 state변경함수들은 비동기 (asynchronous) 로 처리 된다

 

<아직도 자세히는 모르겠다만, 자주 보고 코딩하다보면 깨닫게 되겠지..>