Question

我有一个购物车应用程序。当我从购物车中删除某个商品时，如果删除请求失败，我希望能够将其添加回购物车。

我通过在删除项目之前存储我之前的项目数组来完成此操作。如果请求无法删除该项，我将替换整个项目数组。

请注意，有多个订单，因为购物车可以有多个供应商，每个供应商都有自己的商品可以添加到购物车。

这是我的reducer，如果删除项目请求失败，则会将之前的项目添加回购物车。 items是一个数组，它是order对象

的属性

我的减速机

    case 'ADD_PRODUCT_TO_CART_ERROR':

        return Object.assign({}, state, 
        {
            orders: 
                state.orders.slice(0, action.orderIndex)
                .concat([{
                    ...state.orders[action.orderIndex],
                    items: action.previousItems
                }])
                .concat(state.orders.slice(action.orderIndex + 1))                
        })

它有效，但我在这里改变任何州吗？或Object.assign()为我照顾这个？

Answer 1

当您处理failed request to delete an item时，您正在以完全不同的case 'ADD_PRODUCT_TO_CART_ERROR':处理它。

此处没有任何内容mutating，因为您拥有concating之前的array状态顺序，可以这样做。

确实是处理此类案件的正确方法。

Answer 2

Object.assign创建一个新对象，将属性从一个（或多个）对象轻微复制到一个新对象中。

这意味着如果你的状态有嵌套对象，它们将从新对象中引用（虽然它是一个新对象，如果从一个属性中移除一个属性，它不会影响另一个）。 / p>

如果您想要不变性，我建议您使用Immutable.js

Answer 3

关键要求是reducer不能修改现有的状态对象;它必须产生一个新的对象。您可以使用返回新数据副本的函数，或者如果您不想使用这些js不可变函数，则可以使用库immutable.js。

这个question对immutable.js进行了一些讨论

我是否通过替换对象中的整个数组来改变我的reducer状态？

3 个答案: