Redux：拼合嵌套數據結構

Question

我很難重寫嵌套數據結構以利用redux狀態容器（我在使用Angular 2中的ngrx）。

1. 我的數據包括許多產品

(id, title, description, etc.).

的

每個產品有1個或更多個 「包」

(think: Cars have Premium, Exclusive, Sports etc. packages)

1. 每個包裝可以具有附加元件和/或配置

(addons as in Car + Premium + alloy wheels)

(configuration as in sports package with sport suspension)

一些配置選項可以具有子選項

眼下什麼我有一個深嵌套的Product結構，我想平坦化，因爲在不改變狀態的情況下改變任何更深層的選項都是地獄。

export class Product { 
    public id: string; 
    public title: string; 
    public packages: ProductPackage[] = []; 
} 

export class ProductPackage { 
    public id: string; 
    public title: string; 
    public sku: string; 
    public config?: ProductPackageOptionGroup[]; 
    public addons?: ProductPackageOptionGroup[]; 
} 

export class ProductPackageOptionGroup { 
    public title: string; 
    public options: ProductPackageOption[] = []; 
    // Checkbox or radio 
    public selectionmode: 'single' | 'multiple' = 'single'; 
} 

export class ProductPackageOption { 
    public title: string; 
    public sku?: string; 
    public key?: string; 
    public value?: string; 
    public options?: ProductPackageOption[] = []; 
    public selectionmode: 'single' | 'multiple' = 'single'; 
} 

• 在界面中，用戶首先選擇一個產品，比一個包，並且然後選擇的附加元件和/或配置的配置選項。

• 產品之間切換不應該重置底層軟件包配置。

• 當選擇產品時，只應顯示相應的包裝。

如何拉平這種結構能夠滿足要求，並有一個更容易的時間與終極版開發？

Answer 1

在Redux中管理嵌套/關係數據的建議方法是以規範化的方式存儲它，就像數據庫一樣。請參閱我的回答Dealing with data consistency in a very large store in React + Redux SPA SaaS以獲取更多信息的鏈接。