9월 17일(금) Cmarket_redux 해결되지 않은 문제

itemReducer.js 에서

import { REMOVE_FROM_CART, ADD_TO_CART, SET_QUANTITY } from "../actions/index";
import { initialState } from "./initialState";

const itemReducer = (state = initialState, action) => {

  console.log("cartItems", state.cartItems)

  switch (action.type) {
    case ADD_TO_CART:
      //TODO
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload]
      })
      break;
    case REMOVE_FROM_CART:
      //TODO
      return Object.assign({}, state, {
        cartItems: [...state.cartItems.filter(el => el.itemId !== action.payload.itemId)]
      })

      break;
    case SET_QUANTITY:
      let idx = state.cartItems.findIndex(el => el.itemId === action.payload.itemId)
      //TODO
      console.log('idx', idx)
      // return Object.assign({}, state, {
      //   cartItems: [...state.cartItems.map((el, index) => {
      //     console.log("el", el)
      //     if (index === idx) {
      //       el.quantity = action.payload.quantity
      //       return el;
      //     }
      //     else {
      //       return el;
      //     }
      //   })]
      // })

      // return Object.assign({}, state, {
      //   cartItems: [...state.cartItems].map((el, index) => {
      //     console.log("el", el)
      //     if (index === idx) {
      //       el.quantity = action.payload.quantity
      //       return el;
      //     }
      //     else {
      //       return el;
      //     }
      //   })
      // })

      // return Object.assign({}, state, {
      //   cartItems: [...state.cartItems.slice(0, idx), action.payload, ...state.cartItems.slice(idx)]
      // })

      break;
    default:
      return state;
  }
}

export default itemReducer;

console.log("cartItems", state.cartItems)
= [{}, {}, {}]

console.log("cartItems", [state.cartItems])
= [{}, {}, {}]

와 같이 동일하다, state.cartItems에 배열[] 대괄호를 씌워준다고 한번더 씌워 지진 않는다

즉,

      return Object.assign({}, state, {
        cartItems: [...state.cartItems.map((el, index) => {
          console.log("el", el)
          if (index === idx) {
            el.quantity = action.payload.quantity
            return el;
          }
          else {
            return el;
          }
        })]
      })

      return Object.assign({}, state, {
        cartItems: [...state.cartItems.map((el, index) => {
          console.log("el", el)
          if (index === idx) {
            el.quantity = action.payload.quantity
            return el;
          }
          else {
            return el;
          }
        })]
      })

와같이 map을 state.cartItems에 바로 하든, 배열로 감싸주고 하든 값은 동일하게 나온다

왜 배열을 감싸줘도 같은 값이 나오는지는 좀 더 확인 해봐야할 문제인거 같다