title: Subscribing to part of an ngrx Store only
body: <p>I've been having a great deal of trouble getting a component in my Ionic/Angular application to subscribe to <strong>part</strong> of an @ngrx store. </p>
  
  <p>In my app I have an index.ts file containing:</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as fromReducer1 from './reducer1';
  import * as fromReducer2 from './reducer2';
  
  export interface ApplicationState {
    reducer1: fromReducer1.Reducer1State;
    reducer2: fromReducer2.Reducer2State;
  }
  </code></pre>
  
  <p>in reducer1 I have:</p>
  
  <pre class="lang-js prettyprint-override"><code>export interface Reducer1State {
    products {
     items: any[],
     prices: any[]
    },
    filters: any[]
  }
  </code></pre>
  
  <p>and an export function</p>
  
  <pre class="lang-js prettyprint-override"><code>export function Reducer1 etc 
  </code></pre>
  
  <p>In my component I can happily subscribe to Reducer 1 by doing this:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.store.select('Reducer1')
        .subscribe((store: any) =&gt; {})
  </code></pre>
  
  <p>This works ok but what I want to do is make my component subscribe to Reducer1 but <strong>ONLY</strong> pick up changes to the Products object i.e if the filters object changes then I am not interested in it.  Either that or at least when the component subscribes it can detect whether the products object was identical to the last time i.e using <code>DistinctUntilChanged</code> (I could not get that to work though)</p>
  
  <p>How do I do that (I've searched and tried several things but have not managed to get anything to work).  Thanks!</p>