Redux功能一键落后

Question

I have this:

case "ADD_TO_BASKET":
      return { items: addProductToBasket(state.items, action), total: calculateTotal(state.items)}

const calculateTotal = (items) => {
  return items.reduce((totalPrice, basketItem) => {
    const price = basketItem.product.price;
    const quantity = basketItem.quantity;
    const total = price * quantity;
    console.log('here calc2');
    return totalPrice + total
  }, 0)
}

const addProductToBasket = (items, action) => {
  if (isProductInBasket(items, action)) {
    return items.map((product) => {
      if (product.product.id == action.data.product.id) {
         return {...product, quantity: product.quantity + 1}
      }
      return product;
    });
  }
  else {
    const basketState = [].concat(items).concat({...action.data, quantity: 1})
    return basketState;
  }
}

the problem is that when I call this function it updates items everytime i click correctly but total is always one click behind. for example if i call it once then total is 0 when it should be 20 and if i click it again the total should be 40 but is actually only 20. can post more code but any reason why it would be one step behind so to speak?

Answer 1

You should remove the additional param you have added to reduce function. During initial iteration the first parameter takes the value as 0. Try with this

const calculateTotal = (items) => {
  let totalPrice = 0
  return items.reduce((basketItem) => {
    const price = basketItem.product.price;
    const quantity = basketItem.quantity;
    const total = price * quantity;
    console.log('here calc2');
    return totalPrice + total
  })
}