如何计算reducer中所有物品的总价？

Question

我正在尝试在 reactjs/redux 中构建一个购物车应用程序，这是我的 reducer 之一：

const initialState = {
    items: [],
    cartOpen:true
}

    const Cart = (state = initialState, action) => {
        switch (action.type) {
            case 'ADD_TO_CART':
                return [...state, action.payload]
            default:
                return state
        }
    }

    export default Cart;

另一个减速器包含数据，即应用程序的项目：

const Data = (state = initialState, action) => {
    switch (action.type) {
        case 'GET_DATA_SUCCESS':
            return Object.assign({}, state, { datas: action.data });
        case 'GET_DATA_FAIL':
            return Object.assign({}, state, { datas: action.data });

        default:
            return state
    }
}

调度 ADD_TO_CART 操作后，我想计算购物车的新总计。我正在寻找一种方法来计算购物车更新时购物车中所有商品的总价。

Answer 1

如果导致项目更改的操作是 GET_DATA_SUCCESS 那么您可以计算同一个 reducer 中的总价并相应地设置新状态属性，例如：

case 'GET_DATA_SUCCESS':
  let totalPrice = getTotalPrice(action.data);
  return Object.assign({}, state, { datas: action.data, cartTotal: totalPrice });

（如果价格会因检索失败而发生变化，您需要重新计算价格并在两个 case 子句中进行设置。）

如果你不想在这个子句中设置状态的两个部分，你可以将它分解成两个减速器，都作用于（比如）GET_DATA_SUCCESS 但设置状态的单独部分（一份用于 datas，一份用于 cartTotal).

作为一个完整的替代方案，并牢记保持状态规范化的偏好；您可以将项目保留在状态中并在其他地方使用辅助函数来计算渲染的总价。如果项目数量比较少，计算也很简单，那么这很值得考虑。这很值得一读：

http://redux.js.org/docs/recipes/ComputingDerivedData.html

Answer 2

你可以这样做。

const initialState = {
    items: [],
    cartOpen:true,
    total:0,
}

const Cart = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            let newstate =  [...state, action.payload];
            let newTotal = 0;
            newstate.items.forEach(item=>{
               newTotal+=item.price;
            });
            newstate.total =newTotal;
            return newstate ; 
        default:
            return state
    }
}

export default Cart;

如何计算reducer中所有物品的总价？

How to calculate the total price of all items in reducer?

reactjs

react-redux