title: How to get the correct slice data using selectors for multiple pieces of state and use them inside component | ngRx | Redux | Angular 6 | typescript
body: <p>I am going to create an application using angular 6 and ngrx v6. I have created the following app state.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>  StoreModule.forRoot({'user': userReducer, 'events': eventsReducer}),
  </code></pre>
  
  <p>app.state.ts</p>
  
  <pre><code>import { UsersState } from '@app/reducers/users.reducers';
  import { EventsState } from '@app/reducers/events.reducers';
  
  export interface AppState{
      user:UsersState,
      events:EventsState
  }
  </code></pre>
  
  <p>users.reducers.ts</p>
  
  <pre><code>export interface UsersState {
      lastInteractionTime: number,
      bookmarksId: object
  }
  
  const intialState: UsersState = {
      lastInteractionTime: time,
      bookmarksId: {}
  }
  
  export function userReducer(state = intialState, action: usersActions.Action): UsersState{
    switch (action.type) {
      case usersActions.LOAD_USERS:{
        return Object.assign({}, action.payload, state);
        // return action.payload;
      }
      default:{
        return state;
      }
    }
  }
  </code></pre>
  
  <p>events.reducers.ts</p>
  
  <pre><code>import { AppState } from '@app/app-state';
  
  export interface EventsState {
    data: Array&lt;Object&gt;;
  }
  
  const intialState: EventsState = {
    lastInteractionTime: time,
    data: []
  }
  
  
  export function eventsReducer(state = intialState, action: eventsActions.Action): EventsState{
    switch (action.type) {
      case eventsAction.LOAD_EVENTS:{
        return Object.assign({}, action.payload, state);
        // return action.payload;
      }
      default:{
        return state;
      }
    }
  }
  
  export const selectUser = (state: AppState) =&gt; state.user;
  
  export const selectEvents = (state: AppState) =&gt; state.events;
  
  export const eventsByUser_ = createSelector(
    selectUser,
    selectEvents,
    (user, events) =&gt; {
        console.log('User: ' + JSON.stringify(user));
        /*
          add some logic, filter the data and return events by user's bookmark property.bookmark
        */
        return events.all[user.bookmarksId];
      }
  )
  </code></pre>
  
  <p>When the application starts I dispatch the LoadUserAction action which called my API and returns user object with bookmarksId property.</p>
  
  <p>AppComponent@ngOnInit() </p>
  
  <pre><code>this.userData = this.userService.getUser().subscribe(
        data =&gt; {
          this.userData = data.response;
          if(this.userData) {
            this.store.dispatch(new LoadUserAction(this.userData));
          }
        },
        err  =&gt; {
          console.log(err);
        }
      );
  </code></pre>
  
  <p><strong>Problem:</strong> But in HomeComponent, I want to get the user's events based on their bookmarksId property. I didn't get the user's data is just because may be the API's response is not returned.</p>
  
  <p>HomeComponent.ts</p>
  
  <pre><code>export class HomeComponent implements OnInit {
    constructor(private eventService:EventService) {
  
    }
  }
  ngOnInit() {
    this.eventService.getData(
      data =&gt; {
         this.store.dispatch(loadEventData(data));
      },
      err  =&gt; {
        console.log(err);
      }
    );
    this.store.pipe(select(eventsByUser_)).subscribe(
      console.log // it consoles the empty as because the user is always returning initial state with bookmarksId as empty object {}.
    )
  }
  </code></pre>
  
  <p>EventService.ts</p>
  
  <pre><code>getData(){
    ...
    return eventsData //Observable of data.
  }
  </code></pre>
  
  <p>Do I need to place the subscribe method "eventsByUser_" somewhere else? How can I ensure that the "eventsByUser_" selector is working only when the user slice has data.</p>