Redux：扁平化嵌套数据结构答案

【问题标题】：Redux: Flatten nested data structureRedux：扁平化嵌套数据结构
【发布时间】：2017-04-17 04:27:21
【问题描述】：

我很难重写嵌套数据结构以使用 redux 状态容器（我在 Angular 2 中使用 ngrx）。

我的数据包含许多产品

(id, title, description, etc.).

每个产品都有 1 个或多个“包”

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

每个包都可能有插件和/或配置

(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';
}

在 UI 中，用户首先选择产品，而不是包，然后选择插件和/或配置配置选项。
在产品之间切换不应重置底层包配置。
选择产品时，只应显示相应的包。

如何扁平化这个结构以满足需求并更轻松地使用 redux 进行开发？

【问题讨论】：

也许你应该考虑尝试一下 Immutable.JS ？
另外，我在这里没有看到任何问题......你能澄清一下吗？
添加的要求和问题
为什么不使用 Immutable.JS ？它将帮助您操纵那些嵌套结构，并确保您的减速器中没有任何变化！
它是另一个我不想学习的库/API/现在有时间学习。

标签： typescript redux ngrx

【解决方案1】：

在 Redux 中管理嵌套/关系数据的建议方法是以规范化的方式存储它，例如数据库。请在Dealing with data consistency in a very large store in React + Redux SPA SaaS 上查看我的回答以获取更多信息的链接。

【讨论】：