Реагировать функцию Reducer вернуть массив объектов

Question

Если у меня есть массив объектов, представляющих сказать корзина (в React)

[ { id: 1, qty: 1 } ] 

что бы аккуратный способ добавления элемента в этой state?

Мне нужно было бы проверить, содержит ли массив объект с этим идентификатором, если он это сделал, а затем обновить его количество, если нет, то просто создайте новый элемент массива, добавив этот новый объект.

Я получаю себя в беспорядке, пытаясь написать это с новым синтаксисом ES6 в функциональном стиле ... это то, что я до сих пор ...

let initialState = [] 

    export default function shoppingCart(state=initialState, action) { 
    switch(action.type) { 
     case 'ADD_TO_CART': 
      // check the array of objects and only act on the one we are interested in 
      let newQty = action.payload.qty 
      console.log("state : ", state) 
      for(let i = 0; i < state.length; i++) { 
       if (state[i].id === action.payload.id) { 
        newQty = state[i].qty + action.payload.qty 
        console.log("QTY : " + newQty) 
       } 
      } 
      //Obviously this will not work if the {id ...} already exists 
      return [ ... state, {id:action.payload.id, qty:newQty} ] // todo: update this to contain the payload with qty included 

     case 'REMOVE_FROM_CART': 
      return state.filter(elem => elem.id !== action.payload.id) 
     default: 
      return state 
    } 
} 

Answer 1

Вы можете использовать Array.prototype.splice заменить массив деталь с другой:

case 'ADD_TO_CART': 
    const index = state.findIndex(item => item.id === action.payload.id) 
    if (index > -1) { 
    state.splice(index, 1, { 
     id: action.payload.id, 
     qty: state[index].qty + action.payload.qty 
    }) 
    return [...state] 
    } 
    else { 
    return [...state, { 
     id: action.payload.id, 
     qty: newQty 
    }] 
    }