Блог

Главная - Вопросы по программированию - Как отправить новое количество в состояние?

Как отправить новое количество в состояние?

#reactjs #redux

#reactjs #сокращение

Вопрос:

У меня есть этот код

 const initialState = {
  asideItems: [],
  total: 0
}

const asideReducer = (state = initialState, action) =>{
  switch(action.type) {
    case ADD_TO_ASIDE:
      const item = action.payload
      const existItem =  state.asideItems.find(item => action.payload.id === item.id)
      if(existItem)
      {
        console.log(item)
        item.quantity  = 1
        console.log(item)

        return{
          ...state,
          total: state.total   item.price,
        }
      }
      else{
        return{
          ...state,
          asideItems: [...state.asideItems , item],
          total: state.total   item.price
        }
      }
    default:
      return state
  }
}

Я делаю простую проверку, если в asideItems существует такой элемент, измените его количество. Например item.quantity = 1 , работает верно

 console.log(item) // Quantity = 1
item.quantity  = 1
console.log(item) // Quantity =  2

Но новое количество не отправляется в состояние. Что может быть причиной этого?

Комментарии:

1. вы не обновляете состояние с помощью количества

2. Вы не возвращаетесь quantity — я не понимаю, чего вы ожидаете.

3. @BiswaBhusan но как обновить состояние с количеством для этого элемента?

4. можете ли вы сказать мне, как выглядит полезная нагрузка тура в действии

Ответ №1:

Я заметил здесь несколько проблем. Во-первых, оператор switch не является синтаксически допустимым. Необходимо указать ADD_TO_ASIDE. Во-вторых, вы не используете функциональный подход для обновления количества ваших товаров, вместо этого вы изменяете переменную на месте, это не будет работать таким образом с redux. Ознакомьтесь с правилами редукторов.

 const asideReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TO_ASIDE":
      const updatedAsideItems = state.asideItems.map(currentItem => {
        if (currentItem.id === action.payload.id) {
          return {...currentItem, quantity: (currentItem.quantity || 0)   1}
        } else {
          return currentItem
        }
      })
      
      return { ...state, asideItems: updatedAsideItems, total: state.total   action.payload.price}
    default:
      return state
  }
}

Codesandbox