Question

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

我的数据包含许多产品

(id, title, description, etc.).

每件产品都有一个或多个＆＃34;包装＆＃34;

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

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

如何扁平化此结构以满足要求并使用redux更容易开发？

Answer 1

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

Redux：展平嵌套数据结构

1 个答案: