버튼을 하나 만들어서 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/ (코딩애플님 리액트 강의)