action 생성자 함수를 생성 -> dispatch -> Reducer
모든 과정을 제대로 진행했는데, 화면의 숫자가 안 올라간다?
혹시 몰라서 콘솔로그를 찍어봤는데 변경된 숫자는 배열에 잘 담긴다...
뭐가 문제인지 잘 모르고 있었는데 결국 이유는 참조 자료형에 대한 나의 이해 부족이었다.
case SET_QUANTITY:
let idx = state.cartItems.findIndex(el => el.itemId === action.payload.itemId)
//TODO
state.cartItems[idx] = {itemId: action.payload.itemId, quantity: action.payload.quantity}
console.log(action.payload);
console.log(state);
return state
"변경된 값이 state에 담기는데 뭐가 문제야? 콘솔로그도 잘 나오는데?"
state 내부 값은 변경되었지만 state 변수 자체가 참조하는 주소는 변경되지 않았다.
변경되지 않았다면 렌더링이 되지 않는다.
case SET_QUANTITY:
let idx = state.cartItems.findIndex(el => el.itemId === action.payload.itemId)
//TODO
state.cartItems[idx] = {itemId: action.payload.itemId, quantity: action.payload.quantity}
console.log(action.payload);
console.log(state);
let result = {...state}
return result;
새로운 배열로 만들어주니 렌더링이 잘 되는 것을 확인.
case SET_QUANTITY:
let idx = state.cartItems.findIndex(el => el.itemId === action.payload.itemId)
//TODO
return {
...state,
cartItems: [
...state.cartItems.slice(0, idx),
action.payload,
...state.cartItems.slice(idx + 1),
],
}
구조분해할당으로 잘라서 표현할 수도 있다.