Reduxの機能私はこれを持って

Question

後ろにワンクリック：

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; 
    } 
} 

問題は、私はこの関数を呼び出すときにアイテムが毎回私が正しくクリック更新しますが、合計は常に背後にワンクリックであるということです。私はそれを一度呼び出すと、それは20でなければならない合計は0であり、私は再び合計を40にする必要があります実際には20ですが、より多くのコードを掲示することができますしかし、 ？

Answer 1

機能を減らすために追加した追加のパラメータを削除する必要があります。最初の反復処理では、最初のパラメータは0の値をとります。

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 
    }) 
}