Subscribing to part of an ngrx Store only

Question

I've been having a great deal of trouble getting a component in my Ionic/Angular application to subscribe to part of an @ngrx store.

In my app I have an index.ts file containing:

import * as fromReducer1 from './reducer1';
import * as fromReducer2 from './reducer2';

export interface ApplicationState {
  reducer1: fromReducer1.Reducer1State;
  reducer2: fromReducer2.Reducer2State;
}

in reducer1 I have:

export interface Reducer1State {
  products {
   items: any[],
   prices: any[]
  },
  filters: any[]
}

and an export function

export function Reducer1 etc 

In my component I can happily subscribe to Reducer 1 by doing this:

this.store.select('Reducer1')
      .subscribe((store: any) => {})

This works ok but what I want to do is make my component subscribe to Reducer1 but ONLY 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 DistinctUntilChanged (I could not get that to work though)

How do I do that (I've searched and tried several things but have not managed to get anything to work). Thanks!

Answer 1

You can write inner selector

// take the whole state reducer
export const reducer2State= (state: State) => state.transactions;
//take inner reducer 
export const getInnerState = createSelector(reducer2State, 
        fromReducer2.something);
// select in component
this.innerReducer = this.store.select(fromRoot.getInnerState );

If you are using ngrx2 checkout out this example app. If you are using ngrx4 checkout out this example app