Question

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

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;

另一个reducer包含数据，即app的项目：

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中计算总价格并相应地设置新的状态属性，如下所示：

dropdown

（如果检索失败的价格可能会发生变化，您需要重新计算价格并在两个案例条款中设置它。）

如果您不想在此子句中设置状态的两个部分，则可以将其分解为两个reducers，两者都作用于（例如）GET_DATA_SUCCESS但设置状态的单独部分（一个用于数据，一个用于 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;

如何计算减速机中所有物品的总价？

2 个答案: