Question

我在reactjs / redux中使用此减速器构建了一个购物车应用程序：

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

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

        case 'TOGGLE_CART':
            debugger;
            return !state.cartOpen;

        default:
            return state
    }
}

export default Cart;

我正在尝试设置购物车的状态即打开，但是当我检查日志时，购物车属性是否更新而不是cartOpen属性？

Answer 1

Redux假设你永远不会改变它给你的对象减速器。 每次都必须返回新的状态对象。即使您不使用像Immutable这样的库，也需要完全避免突变。

case 'TOGGLE_CART':
    return !state.cartOpen;

执行^^这会改变你的状态（破坏你的状态对象）。当你不保证不变性时，Redux会失去其可预测性和效率。

要实现不可变状态，我们可以使用vanilla Object.assign或更优雅的替代object spread syntax。

case 'TOGGLE_CART':
    return {
        ...state,
        cartOpen: !state.cartOpen
    }

Answer 2

您的reducer必须始终返回其负责的应用程序状态的完整部分。对于TOGGLE_CART，您只返回openCart的布尔值。

而是创建先前状态对象的副本，并仅更新要更改的单个属性：

case 'TOGGLE_CART':
    return Object.assign({}, state, {
        cartOpen: !state.cartOpen
    });

如何在reducer中切换属性？

2 个答案: