쓰는 이유

state 데이터 관리가 용이함.

redux에선 state데이터의 수정방법을 미리 정의합니다.
그것은 바로 reducer이다.
reducer는 수정된 state를 뱉어주는 함수이다.

---

코드

구현된 모습

reducer함수 내의 if구문 조건에 따라 각각의 버튼을 누를 때마다
수량이 증가 및 감소하는 것을 볼 수 있다.

index.js

reducer함수 내의 if구문에 따라 state가 변경되고,
변경된 값이 store변수에 할당되어 사용된다.

//index.js
let 초기값 =  [
  { id : 0, name : '멋진신발', quan : 2 }, 
  { id : 1, name : '멋진신발2', quan : 5 }
];

function reducer(state = 초기값, 액션) {
                //default parameter 
  if(액션.type === '수량증가') {
    let 카피본 = [...초기값];
    카피본[0].quan++;
    return 카피본;
  } else if(액션.type === '수량감소'){
    let 카피본2 = [...초기값];
    카피본2[0].quan--;
    return 카피본2;
  } else {
    return state;
  }
}

let store = createStore(reducer);
//store안에는 변경된 카피본 or 초기값들이 리턴되어 할당이 된다.

Cart.js

버튼을 누르면 reducer에 만들어둔 '수량증가' or '수량감소' 요청을 해보자
데이터 수정요청을 할 땐 props.dispatch({ type : ??? });

 	{
            props.state.map((el, i)=>{
              return (
                <tr key={ i }>
                  <td>{ el.id }</td>
                  <td>{ el.name }</td>
                  <td>{ el.quan }</td>
                  <td>
                    <button onClick={()=>{ props.dispatch({ type : '수량증가' })}}>+</button>
                    <button onClick={()=>{ props.dispatch({ type : '수량감소' })}}>-</button>
                  </td>
                </tr>
              )
            })
          }

---