Хранение аналогичных структурированных данных в редукторах в приложении Reaction-Redux

Question

Это скорее проектно-ориентированный запрос, связанный с обработкой с помощью редукторов в приложении реагирования / избыточности.

Текущая ситуация:

У меня есть страница продукта, которая отображает один продукт на сегодняшний день, и этот продукт, скажем, может быть доставлен с использованием Express или Способ доставки курьером. У меня есть API, который я вызываю для получения сведений о продукте, и как только все данные получены, они сохраняются в редукторе productDetails. Теперь, поскольку моя страница продукта содержит много компонентов, данные редуктора productDetails распределяются между всеми этими компонентами с помощью mapStateToProps, где я предоставляю это значение редуктора в качестве опоры для компонента.

Требуется изменение:

Теперь в системе требуется изменение, и вместо одного продукта мне нужно отобразить оба продукта, в которых пользователь может переключаться между курьером. до Express и наоборот. Я не хочу, чтобы API вызывался каждый раз, вместо этого продукт, который изначально загружен, сохранит свои данные в редукторе, и как только пользователь нажмет на другой продукт (может быть курьером или express), вызовет API еще раз также храните свои данные в редукторе. Как только у меня появятся данные о продукте, я не буду сейчас вызывать API и просто переключу данные для соответствующего продукта с редуктора в mapStateToProps, чтобы данные были доступны компоненту в виде реквизита и могли быть обработаны.

Вопрос:

Мой вопрос заключается в том, как в таких случаях хранить данные в редукторах. Что может быть лучшим подходом для этого, с точки зрения масштабируемости (скажем, необходимо отобразить более 2 типов продуктов) и производительности? Я имею в виду ниже 2 подходов:

Допустим, мой 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:

Я использую два разных редуктора для хранения данных для курьера и express (PSB для ссылки), а затем просто переключаю редуктор в 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 для 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
         }
    }
}  

Answer 1

Я предлагаю вам структурировать ваши данные на основе 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
     }
}