Reactjs 在react-redux应用程序的还原器中存储类似的结构化数据

这更像是一个面向设计的查询，涉及在react/redux应用程序中处理减缩器

当前情况：

我有一个产品页面，显示的是一个单一的产品，从今天开始，这个产品可以使用快递或快递方式交付。 我调用了一个API来获取产品详细信息，一旦获取了所有数据，它就会存储在productDetails reducer中。现在，由于我的产品页面有许多组件，因此使用mapStateToProps在所有这些组件之间共享此productDetails reducer数据，我将此reducer值作为组件的道具提供

需要更改：

现在需要对系统进行更改，而不是单一产品，我必须显示两种产品，用户可以在Courier和Express之间切换，反之亦然。我不希望每次都调用API，相反，最初加载的产品我会将其数据存储在reducer中，一旦用户单击其他产品（可以是courier或express），将再次调用API，并将其数据存储在reducer中。一旦我有了这两个产品数据，我现在就不会调用API，只需在mapStateToProps中从reducer中切换相应产品的数据，这样数据就可以作为道具提供给组件，并且可以呈现

问题：

我的问题是，在这种情况下，数据应该如何存储在减缩器中。在可伸缩性（假设需要显示两种以上的产品类型）和性能方面，最好的方法是什么？我有以下两种方法：

假设我的API以以下格式提供数据，对象结构保持不变，但Courier和Express的数据不同：

Courier product
data: {
    productId: "COUR1111"
    productName: "Personalized courier product"
    skuCode: "SKUC111",
    prodType: "COURIER",
    productPrice: {
        price: 349, 
        listPrice: 349, 
        defaultPrice: 349
    }
}

Express product
data: {
    productId: "EXP1111"
    productName: "Personalized Express product"
    skuCode: "SKUE111",
    prodType: "EXPRESS",
    productPrice: {
        price: 449, 
        listPrice: 449, 
        defaultPrice: 449
    }
}

方法1：

我使用两个不同的减缩器来存储courier和express的数据（PSB用于ref），然后在mapStateToProps中简单地切换减缩器

productDetails: {
    productId: "COUR1111"
    productName: "Personalized courier product"
    skuCode: "SKUC111",
    prodType: "COURIER",
    productPrice: {
        price: 349, 
        listPrice: 349, 
        defaultPrice: 349
    }
}

expressProdDetails: {
    productId: "EXP1111"
    productName: "Personalized Express product"
    skuCode: "SKUE111",
    prodType: "EXPRESS",
    productPrice: {
        price: 449, 
        listPrice: 449, 
        defaultPrice: 449
    }
}

方法2：

我使用的是我今天使用的同一个减速机，我没有使用两个单独的减速机，而是使用键值对（PSB for ref）将数据存储在同一个减速机中

---

我建议您在productId的基础上构建数据，并将新属性添加到数据中，例如Type courier或express

productDetails: {
"EXP1111": {
     Type: "Express"
     productName: "Personalized Express product"
     skuCode: "SKUE111",
     prodType: "EXPRESS",
     productPrice: {
         price: 449, 
         listPrice: 449, 
         defaultPrice: 449
     }
},
"COUR1111": {
     Type: "COURIER"
     productName: "Personalized courier product"
     skuCode: "SKUC111",
     prodType: "COURIER",
         productPrice: {
         price: 349, 
         listPrice: 349, 
         defaultPrice: 349
     }
}

---

方法2看起来更具吸引力和可扩展性。如果将来您有更多的方法，那么您可以简单地添加另一个键

productDetails: {
"EXP1111": {
     Type: "Express"
     productName: "Personalized Express product"
     skuCode: "SKUE111",
     prodType: "EXPRESS",
     productPrice: {
         price: 449, 
         listPrice: 449, 
         defaultPrice: 449
     }
},
"COUR1111": {
     Type: "COURIER"
     productName: "Personalized courier product"
     skuCode: "SKUC111",
     prodType: "COURIER",
         productPrice: {
         price: 349, 
         listPrice: 349, 
         defaultPrice: 349
     }
}