title: Redux: Flatten nested data structure
body: <p>I'm having a hard time rewriting a nested data structure to make use of redux state container (I'm using <code>ngrx</code> for Angular 2).</p>
  
  <ol>
  <li>My data consists of many products </li>
  </ol>
  
  <p><code>(id, title, description, etc.).</code></p>
  
  <ol start="2">
  <li>Every product has 1 or more "packages" </li>
  </ol>
  
  <p><code>(think: Cars have Premium, Exclusive, Sports etc. packages)</code></p>
  
  <ol start="3">
  <li>Every package may have addons and/or configuration</li>
  </ol>
  
  <p><code>(addons as in Car + Premium + alloy wheels)</code></p>
  
  <p><code>(configuration as in sports package with sport suspension)</code></p>
  
  <ol start="4">
  <li>some config-options may have suboptions </li>
  </ol>
  
  <p>Right now what I have is one deeply nested <code>Product</code> structure, which I would like to flatten out, because changing any deeper options is hell without mutating the state.</p>
  
  <pre><code>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';
  }
  </code></pre>
  
  <ul>
  <li><p>In the UI, the user first selects a product, than a package, and then selects addons and/or configures config-options.</p></li>
  <li><p>Switching between products should not reset the underlying package configurations.</p></li>
  <li><p>Only the corresponding packages should be displayed when a product is selected.</p></li>
  </ul>
  
  <p><strong>How to flatten this structure to meet the requirements and have an easier time developing with redux?</strong></p>