Storing similar structured data in reducers in a react-redux application

It is more of a design-oriented query I have involving handling with reducers in a react/redux application.

Current situation:

I have a product page that display's a single product as of today and this product let's say can be either delivered using an Express or a Courier delivery method. I have an API that I call to fetch the product details and once all the data has been fetched it is stored in productDetails reducer. Now since my product page has many components, this productDetails reducer data is being shared across all these components using mapStateToProps where I provide this reducer value as a prop to the component.

Change needed:

Now there is a change required in the system and instead of the single product I have to display both the products wherein the user can switch between Courier to Express and vice-versa. I don't want API to be called every time, instead, the product which is initially loaded I will store its data in reducer and once the user clicks on other product (can be courier or express) will call the API once more also store its data in the reducer. Once I have both the product data, I will not call the API now and will simply switch the data for the respective product from reducer in mapStateToProps so that the data will be available to the component as a prop and can be rendered.

Question:

My question is how the data should be stored in reducers in such cases. What might be the best approach to do so, in terms of scalability (let's say there is a need to display more than 2 product types) and performance? I have below 2 approaches in mind:

Let's say my API brings data in below format, the object structure remains the same but data varies for between Courier and 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
    }
}

Approach 1:

I use two different reducers to store the data for courier and express (PSB for ref) and then simply switch the reducer in 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
    }
}

Approach 2:

I use the same reducer which I am using today and instead of having 2 separate reducers I store data in the same reducer with key-value pair(PSB for ref).

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