redux 사용하는 중에 렌더링이 안 되는 상황

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),
        ],
      }

구조분해할당으로 잘라서 표현할 수도 있다.