title: ngrx store select giving undefined always
body: <p>I am new to Angular 6 I am trying to get data using ngrx store select.</p>
  
  <p><strong>shoppingcart.model.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class Cart {
    ShoppingCart: ShoppingCart;
    Callbacks: Callbacks;
  }
  export class Callbacks {
    CallbackURL: string;
    CallbackURLInEmail: string;
  
    constructor() {
      this.CallbackURL = undefined;
      this.CallbackURLInEmail = undefined;
    }
  }
  
  export class ShoppingCartTotal {
    Amount: Amount;
    Currency: string;
    NumberofItems: NumberofItems;
  }
  
  export class ShoppingCart {
    ShoppingCartTotal: ShoppingCartTotal;
    ShoppingCartItems: ShoppingCartItems;
  
    constructor() {
      this.ServiceFees = undefined;
      this.ShoppingCartTotal = undefined;
    }
  }
  export class ShoppingCartItem {
    Type: string;
    PassengerID: PassengerID;
    ShoppingCartItemID: ShoppingCartItemID;
    Quantity: Quantity;
  }
  </code></pre>
  
  <p><strong>action.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Action } from '@ngrx/store';
  import { Cart } from '@app/shared/models';
  
  export enum ShoppingCartActionTypes {
    SHOPPINGCART_DEFAULT = '[Cart] Load Default Shopping Cart',
    SHOPPINGCART_ADD = '[Cart] Add Shopping Cart',
    SHOPPINGCART_UPDATE = '[Cart] Update Shopping Cart',
    SHOPPINGCART_DELETE = '[Cart] Delete Shopping Cart'
  }
  
  export class DeleteCartAction implements Action {
    readonly type = ShoppingCartActionTypes.SHOPPINGCART_DELETE;
    constructor(public payload?: any) {}
  }
  
  export class LoadCartDefaultAction implements Action {
    readonly type = ShoppingCartActionTypes.SHOPPINGCART_DEFAULT;
    constructor(public payload?: Cart) {}
  }
  export class LoadCartAddAction implements Action {
    readonly type = ShoppingCartActionTypes.SHOPPINGCART_ADD;
    constructor(public payload?: Cart) {}
  }
  
  export class UpdateCartAction implements Action {
    readonly type = ShoppingCartActionTypes.SHOPPINGCART_UPDATE;
    constructor(public payload: Cart) {}
  }
  
  export type ShoppingCartActionsUnion =
    | LoadCartDefaultAction
    | UpdateCartAction
    | LoadCartAddAction
    | DeleteCartAction;
  </code></pre>
  
  <p><strong>Reducer.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import * as cloneDeep from 'lodash/cloneDeep';
  import { Action } from '@ngrx/store';
  import {
    ShoppingCartActionTypes,
    ShoppingCartActionsUnion
  } from '../actions/createshoppingcart.actions';
  import { Cart } from '@app/shared/models';
  
  export interface CartState {
    Cart: Cart;
  }
  
  export const initialState: CartState = {
    Cart: new Cart()
  };
  
  export function Cartreducer(
    state = initialState,
    action: ShoppingCartActionsUnion
  ): CartState {
    let update = getClone(state.Cart);
    switch (action.type) {
      case ShoppingCartActionTypes.SHOPPINGCART_DEFAULT: {
        return initialState;
      }
      case ShoppingCartActionTypes.SHOPPINGCART_UPDATE: {
        update = action.payload;
        return {
          ...state,
          Cart: action.payload
        };
      }
      case ShoppingCartActionTypes.SHOPPINGCART_DELETE: {
        return initialState;
      }
  
      case ShoppingCartActionTypes.SHOPPINGCART_ADD: {
        return {
          ...state,
          Cart: action.payload
        };
      }
      default: {
        return state;
      }
    }
  }
  
  export function getClone(trip: Cart): Cart {
    let clone = cloneDeep(trip);
    return clone;
  }
  </code></pre>
  
  <p><strong>Index.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {
    ActionReducerMap,
    combineReducers,
    compose,
    createSelector,
    createFeatureSelector,
    ActionReducer,
    MetaReducer
  } from '@ngrx/store';
  import { environment } from '@env/environment';
  import * as shoppingCartreducer from './createshoppingcart.reducer';
  import * as fromRouter from '@ngrx/router-store';
  
  export interface State {
    shoppingCart: shoppingCartreducer.CartState;
  }
  
  export const reducers: ActionReducerMap&lt;State&gt; = {
    shoppingCart: shoppingCartreducer.Cartreducer
  };
  </code></pre>
  
  <p><strong>state.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { StoreModule, Store } from '@ngrx/store';
  import { Cartreducer, CartState } from './reducers/createshoppingcart.reducer';
  
  @NgModule({
    imports: [StoreModule.forRoot({ categories: Cartreducer })],
    declarations: []
  })
  export class AppStateModule {}
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { APIService } from '../backend/api/api.service';
  import { Observable } from 'rxjs/Observable';
  import { Store } from '@ngrx/store';
  import { Cart } from 'app/shared/models';
  import * as shoppingCartAction from 'app/state/actions/createshoppingcart.actions';
  import * as fromRoot from '@app/state/reducers';
  import { CartState } from '@app/state/reducers/createshoppingcart.reducer';
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers: [APIService]
  })
  export class LoginComponent implements OnInit {
    testData: any;
    // testData: Observable&lt;any&gt;;
    constructor(
      private apiService: APIService,
      private store: Store&lt;CartState&gt;
    ) {}
    ngOnInit() {
      this.getConfiguration();
    }
  
    private getConfiguration() {
      this.apiService
        .createCartWorkarea(this.queryParam, 'test')
        .subscribe(response =&gt; {
          this.updateCart(response);
          this.testData = this.store.select('Cart');
          console.log('testData', this.testData);
        }),
        error =&gt; {
          console.log('response', error);
        };
    }
  
    updateCart(response) {
      this.store.dispatch(new shoppingCartAction.LoadCartAddAction(response));
    }
  }
  </code></pre>
  
  <p>I'm trying to implement ngrx v4 to my angular project and struggling with getting data from ngrx store. I wrote Actions, Reducer and tried to select the value dispatched but getting undefined always
      I tried multiple ways to resolve the issue but still I am getting <img src="https://i.stack.imgur.com/NSDmn.png" alt="enter image description here"></p>