如何在reducer中切换属性？

Question

我在reactjs/redux中使用这个reducer构建了一个购物车应用程序:

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假设你永远不会改变它在reducer中给你的对象.每次都必须返回新的状态对象.即使您不使用像Immutable这样的库,也需要完全避免变异.

case 'TOGGLE_CART':
    return !state.cartOpen;

做^^这会改变你的状态(破坏你的状态对象).当您不保证不变性时,Redux会失去其可预测性和效率.

要实现不可变状态,我们可以使用vanilla Object.assign或其更优雅的替代对象扩展语法.

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

Answer 2

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

相反，创建前一个状态对象的副本并只更新您要更改的单个属性：

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