title: Should we normalize the state in an angular app?
body: <p>at our company we are working on our first Angular projects, including ngrx-store, and we came to the discussion if the state should be normalized or not - the meanings differed in that question.</p>
  <p>Some argued that a nested store would be easier to maintain / to work with, because the api already sends nested data and in some cases the whole object should be cleared from the store.</p>
  <blockquote>
  <p><strong>Example</strong>: Let's say we have a feature store called <strong>customer</strong>. Inside this we store the customer-list and the selected customer. One point: The selected customer object has much more properties than the customer objects inside the customer-list.</p>
  <p>We display the list of customers (model: <strong>CustomerList</strong>) from the store in a component, and if the user clicks on an entry he is redirected to the detail page where customer details (model: <strong>CustomerDetail</strong>) are displayed.</p>
  <p>Inside the details page the user is able to create/edit/delete all the customer-sublists (like addresses, phones, faxes, etc.).
  If the detail page of a specific customer is closed and the user is back on the list, the store object of the customer should be cleared.</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>export interface CustomerState {
      customers: CustomerList[],
      customer: CustomerDetail
  };
  
  export interface CustomerList {
      customerId: number;
      name: string;
  };
  
  export interface CustomerDetail {
      customerId: number;
      firstName: string;
      lastName: string;
      addressList: CustomerDetailAddressList[];
      phoneList: CustomerDetailPhoneList[];
      emailList: CustomerDetailEmailList[];
      faxList: CustomerDetailFaxList[];
      /* ... */
  };
  </code></pre>
  <p>If a user now, let's say creates a new address for a customer on the specific customers detail page, the new address is posted to the api and after a success response from the api the store refetches the new addressList from the api again and puts it into the addressList of the customer inside the store.</p>
  <p>Some think that the biggest disadvantage of a not-normalized state is the following:</p>
  <blockquote>
  <p>The deeper the nesting, the longer and more complex are the mappings inside the store to set or get data to/from the store.</p>
  </blockquote>
  <p>The others argue, if we kind of normalize the state so that there will be no nesting inside the customer object how would we benefit from that, because in our special situation the customerList-objects and the customerDetail-objects differ from each other, otherwise if both objects would be the same, we simply could store the id of the selected customer inside the store and select the data from the customer list by id.</p>
  <p>Another disadvantage they bring into the discussion is, that if a user leaves a customer detail page and the state is normalized, instead of just clearing the customer object, all the other lists refered to the customer need also be cleared.</p>
  
  <pre class="lang-js prettyprint-override"><code>export interface CustomerState {
      customers: CustomerList[],
      customer: CustomerDetail,
      customerAddressList: CustomerDetailAddressList[];
      customerPhoneList: CustomerDetailPhoneList[];
      customerEmailList: CustomerDetailEmailList[];
      customerFaxList: CustomerDetailFaxList[];
  };
  </code></pre>
  <p><strong>tl;dr</strong></p>
  <p>What do you guys think / how are your experiences with the store (normalized or not) and how can we get the best out of both worlds? Any response will be appreciated!</p>
  <p>And please let me know if something is not quite clear or doesn't make sense at all - we are still learning - any help and / or advises are highly appreciated.</p>