React Redux, обновление определенного элемента в состоянии - PullRequest
Новая
       5

React Redux, обновление определенного элемента в состоянии

0 голосов
/ 28 мая 2020

Приведенный ниже Редуктор должен обновлять количество конкретного объекта в состоянии, когда я отправляю {"id": 14, 'quantity':3} или {"id": 14, 'quantity':2}. 


const initialState={ items = [ {"id": 14, 'quantity':1},{"id": 15,'quantity':1},{"id": 25,'quantity':1}] }

const cart =(state=initialState,action)=>{
    switch(action.type){
        case 'UPDATECART':{

             //need updating code here

                 }       
        default: return state
    }
}

export default cart

Как я могу обновить конкретный объект в массиве состояний, сохраняя другие значения неизменными?

Приращение функции обновления quantity существующего объекта на 1 и id будет постоянным.

Предлагаемый рабочий процесс 

 CURRENT STATE : items = [ {"id": 14, 'quantity':1},{"id": 15,'quantity':1},{"id": 25,'quantity':1}] 
    INCOMING OBJECT : {"id": 15,'quantity':2}
    EXPECTED RESULTANT STATE : items = [ {"id": 14, 'quantity':1},{"id": 15,'quantity':3},{"id": 25,'quantity':1}]

Ответы [ 3 ]

1 голос
/ 28 мая 2020

Вы должны заменить элемент в массиве и вернуть новую ссылку на состояние, попробуйте следующий код 

const initialState = {
  items: [
    { id: 14, quantity: 1 },
    { id: 15, quantity: 1 },
    { id: 25, quantity: 1 }
  ]
};

const cart = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATECART": {
      const index = state.items.findIndex(
        item => item.id === action.payload.id
      );
      if (index >= 0) {
        state.items[index] = {
          id: action.payload.id,
          quantity: action.payload.quantity
        };
      } else {
        // add to array if not exist
        state.items.push({
          id: action.payload.id,
          quantity: action.payload.quantity
        });
      }
      return {
        items: [...state.items] // creating new array
      };
    }
    default:
      return state;
  }
};

export default cart;
1 голос
/ 28 мая 2020

Попробуйте следующее: 

case 'UPDATECART':{

         //need updating code here
     return state.map( cart => cart.id === INCOMING_OBJECT.id ? {...cart, quantity: 
     cart.quantity + INCOMING_OBJECT.quantity}: cart )

             }
1 голос
/ 28 мая 2020

Попробуйте: 

    case UPDATE CART:
      const items = state.items;
      const {id, quantity} = INCOMINGOBJECTORPAYLOAD; // destructure new object in 1 line
      const oldQuantity = items.filter(item => item.id === id)[0].quantity

      return {
        [...items, {"id": 15,'quantity':oldQuantity+quantity}]
      };

Обратите внимание, что ...items - это оператор «распространения», используемый для заполнения массива старыми элементами (которые не нуждаются в изменении)

...