[React] 5. Redux 2 (reducer/dispatch)

버튼을 하나 만들어서 Redux를 이용해 수량을 증가시키는 기능을 구현할것이다.

그전에 데이터 수정하는법을 미리 정의해야함

//index.js
function reducer(){
  
}

reducer()라는 함수로 정의한다

let 기본state = [
  { id: 0, name: "fucking shoes", quan: 2 },
  { id: 1, name: "pretty shoes", quan: 10 },
  { id: 2, name: "dirty shoes", quan: 1 },
  { id: 3, name: "normal shoes", quan: 3 },
];

function reducer(state = 기본state, 액션) {
  return state;
}

let store = createStore(reducer);

직전에 createStore()에 값을 직접 집어넣었는데 실은 그게 아니라 reducer()에서 정의해줘야한다. reducer함수는 항상 수정된 state를 리턴 해줘야함

reducer(state = 기본state, 액션)에서 state옆에 등호를 붙여주었는데 기본 파라미터 문법이라는 것이다, 파라미터 자리에 값을 입력하지 않으면 '기본state'를 디폴트 값으로 넣어주는것!!

function reducer(state = 초기값, 액션) {
  if(액션.type==='수량증가'){
    return 수정된state
  }
  else{
    return state
  }
}

if-else문을 통해 수량증가라는 데이터 수정 방법을 정의한다. 이제 '수량증가'라는 요청이 들어오면 아래 코드에 의해 수정된 state를 리턴할것

function reducer(state = 초기값, 액션) {
  if(액션.type==='수량증가'){

    let copy=[...state];
    copy[0].quan++;
    return copy
    
  }
  else{
    return state
  }
}

기존의 state수정 방식과 동일하게 코드를 작성하면 된다. copy의 0번째 quan값을 1 증가시킬것

수정하는 방식을 더 추가하고 싶으면 그냥 if문을 더 써주면 된다.

<td>
	<button onClick={()=>{props.dispatch({type:'수량증가'})}>+</button>
</td>

만들어놓은 button에 데이터 수정요청을 하면 끝이다. 이런방식으로 요청하기때문에 걍 외우자
props.dispatch({type:'???'})

버튼을 누르면 첫번째 데이터의 수량이 증가되었다ㅎㅎ

let 초기값 = [
  { id: 0, name: "fucking shoes", quan: 2 },
  { id: 1, name: "pretty shoes", quan: 10 },
  { id: 2, name: "dirty shoes", quan: 1 },
  { id: 3, name: "normal shoes", quan: 3 },
];

function reducer(state = 초기값, 액션) {
  if (액션.type === "수량증가") {
    let copy = [...state];
    copy[0].quan++;
    return copy;
  } else if (액션.type === "수량감소") {
    let copy = [...state];
    copy[0].quan--;
    return copy;
  } else {
    return state;
  }
}

let store = createStore(reducer);

동일한 방식으로 수량이 감소되는 버튼의 type도 만들어 주었다.

function reducer(state = 초기값, 액션) {
  if (액션.type === "수량증가") {
    let copy = [...state];
    copy[0].quan++;
    return copy;
  } else if (액션.type === "수량감소") {
    let copy = [...state];
    copy[0].quan--;
    if (copy[0].quan < 0) {
      copy[0].quan = 0;
    }
    return copy;
  } else {
    return state;
  }
}

코드를 약간 수정해서 음수일때는 더이상 감소가 되지 않도록 하였다.

수량이 0일때 아무리 버튼을 눌러도 감소되지 않는다!

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)