[ 1. Redux로 수정할려면 ?? ]
1. Redux로 데이터를 수정할려면 어떻게해야할까?
1. Reducer 함수를 이용하자!
2. Reducer함수를 이용해 state 함수를 뱉는다.
3.dispatch함수를 이용!!
4. 액션 type을 이용하자
2. 코드 샘플
/* index. js*/
// 1. 초기값 설정
let 초기값 = [ { id : 1, name : '하이', quan : 0 }, { id : 2, name : '바이', quan : 1 }];
// 2. Reducer함수를 이용하자
function reducer(state = 기본값, 액션) {
if(액션.type === '수량증가') {
let copy = [...초기값];
copy.quan++;
return copy ;
} else {
return state;
}
}
let store = createStore(combineReducers({reducer, reducer2}));
===================================================================================
/* Cart.js */
function Cart(props) {
return(
<div>
<div>
<Table responsive="sm">
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경</th>
</tr>
</thead>
<tbody>
{ // ㅁ 데이터 수정 요청을 할땐 props.dispatch({ type : ??? })
// 위에보다 업그레이드해서 dispatch()로 수정요청할 때 데이터를 보낼 수도 있음 = dispatch({type:어쩌구, payload : 보낼데이터})
props.state.map(function(a,i) {
return(
<tr key={i}>
<td>{a.id}</td>
<td>{a.name}</td>
<td>{a.quan}</td>
<td><button onClick={() => { props.dispatch({ type : '수량증가' }) }}>+</button></td>
<td><button onClick={() => { props.dispatch({ type : '수량감소' }) }}>-</button></td>
</tr>
)
})
}
</tbody>
</Table>
{ props.alert열렸니 === true
? <div className='my-alert2'>
<p>지금 구매하시면 신규할인 20%</p>
<button onClick={() => { props.dispatch({ type : '닫기' }) }}>닫기</button>
</div>
: null
}
</div>
</div>
}
/*
redux를 쓰기위한 셋팅
1. 컴포넌트에서 state를 쓰려면 function을 만들자
2. export default connect()() -> ex) export default connet(함수명)(Cart)
*/
//- redux store 데이터 가져와서 props 변환해주는 함수
function state를props화(state) {
return {
state : state.reducer;
}
}
export defalut connect(state를props화)(Cart)
JavaScript
복사
