React Native Redux订阅存储更改

Question

我正在使用React native和Redux构建一个购物车。有一些操作，如addToCart和removeFromCart，可以更改商店中的产品阵列。我有两个问题：

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中也不在中间件中。

如果这是明确的，你将有两个减速器：

1. 作为产品数据库的第一个减速器：id+name+price+。。。。

2. 第二个减少器是关于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个项目的第二个产品。

那么，addToCart的动作将是{type, productId, quantity}的形状

因此，当用户添加/删除项目时，该操作应仅由二阶减速器处理(假设您使用的是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得出的。