React Native Redux 订阅存储更改答案

【问题标题】：React Native Redux subscribing to store changesReact Native Redux 订阅存储更改
【发布时间】：2018-05-02 05:09:30
【问题描述】：

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

1) 我们如何更新购物车的 totalPrice 等商店字段？我应该订阅商店更改并相应地更新项目吗？是否应该在 React Native 上下文中订阅 store 并调用实用函数

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

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

【问题讨论】：

标签： react-native redux

【解决方案1】：

在架构redux store时，store state不应该有重复信息；它应该符合规范化概念。事实上，像totalPrice,totalItems 这样的信息肯定可以从其他州得出结论。

这个总数可以在 mapStateToProps 内得出/计算，既不是在减速器中也不是在中间件中。

如果这很清楚，您将有两个减速器：

第一个reducer作为产品数据库：id+name+price+....

第二个reducer大约是Cart，它是一组购物物品：id + quantity

我可以提出以下状态形状：

{
  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} 的形状

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

【讨论】：