Redux reducer와 dispatch로 데이터 수정

redux를 쓰는 두번째 이유는 state의 데이터 관리가 가능하다. redux에선 state 데이터의 수정방법을 미리 정의한다.

먼저, 셋팅을 해보면,

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

function reducer(state = 기본state, 액션) {
  	//state=기본state에서 기본state는 default parameter문법인데, 등호를 붙여서 파라미터에  
    //뭘 입력하지 않으면 기본으로 담아진다. 즉, state초기값을 기본state자리에 넣으면 된다.
    return state
}

let store = createStore(reducer);

위처럼, 기본state라는 변수를 만들어 데이터를 담고, store라는 변수를 맨 밑으로 내려준다. 중간에 reducer를 써주는데,

reducer이란 함수를 만들어 수정된 state를 퉤하고 뱉는 함수이다.

function reducer(state = 기본state, 액션) {
  if ( 액션.type === '수량증가' ) {//수량증가라는 데이터수정방법을 정의한 것
    
    let copy = [...state];
    copy[0].quan++;
    return copy

  } else {
    return state
  }
    
}

그 다음에, if문을 사용해서 액션.type === '수량증가'라고 수량증가라는 액션을 정의하고 수량증가라는 액션이 발생하면 copy라는 state의 복사본을 만들고 copy의 수량을 증가시킨 후, return copy를 해준다. 그리고 아무일도 없으면 그대로 state를 반환해준다.

 

그 다음, 수량증가 요청을 하려면

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

이렇게 props.dispatch라는 문법을 써서 안에 오브젝트를 넣고 type : '요청할 액션'을 넣어준다.