Question

我正在使用React native和Redux构建购物车。有一些操作，如addToCart和removeFromCart，它们会更改商店中的products数组。我有两个问题：

1）我们如何更新购物车的totalPrice等商店字段？我应该订阅商店更改并相应更新商品吗？是否应该在React Native上下文中存储到商店并调用实用程序函数

2）我的添加到购物车减速机如下。我是否在改变totalPrice和totalItems的值？如果是这样，我如何在不改变的情况下更新totalPrice和totalItems？这真令人困惑。

switch (action.type) {
    case AddToCart:
      return {
        ...state,
        products: [...state.products, action.product],
        totalPrice: action.totalPrice,
        totalItems: action.totalItems,
      };

Answer 1

在设计redux商店时，商店状态不应该有重复的信息;它应该符合规范化的概念。实际上，像totalPrice，totalItems这样的信息可以明确地从其他州获得。

这个总数可以在mapStateToProps内得出结论/计算，既不是在reducer中也不是在中间件中。

如果清楚，你将有两个减速器：

第一个减速机作为产品数据库：id +名称+价格+ ....

第二个减速器约为Cart，这是一组购物项目：id +数量

我可以提出以下状态：

{
  products : {
   'product_1xxx' : {
      id: product_1xxx,
      price :150,
      name: 'T-Shirt'
    } ,

   'product_2yyy' : {
      id: product_2yyy,
      price : 35,
      name: 'Glass'
   } 

 }, 
 //---second reducer--//

 cartItems: {
    [
      {
       'productId': 'product_2yyy',
        quantity: 3
      }
    ]
 }

}

上面的示例表示您有2个产品，用户选择数量为3个项目的第2个产品。

然后，动作addToCart将是{type, productId, quantity}

因此，当用户添加/删除项目时，操作应仅由第二个reducers处理（假设您正在使用combineReducers）。

此外，组件（负责呈现总计）应具有以下mapStateToProps：

function mapStateToProps({products, cartItems }) {
   return {
    totalPrice: cartItems.map(({productId, quantity}) => ({quantity, price: products[productId].price  }))
                         .reduce((total, item) => total + (item.price * item.quantity) , 0);
   }
}

正如您所注意到的，price信息并不多余，但它是通过productId加入第一个reducer的结论。

React Native Redux订阅商店更改

1 个答案: