title: NgRx: Get data from store but it's undefined
body: <p>dear Stackoverflow Community.</p>
  
  <p>I'm new in NgRx and trying to find out how does it works. I create an app - simple Shop List based on Angular 6, Firebase and NgRx.</p>
  
  <p>I added a couple of items in collection called <code>Product</code> and trying to fetch them via ngrx patterns. Seems I did all good - I have fetched items as payload in <code>GET_PRODUCTS_SUCCESS</code> but I can't put them into the view to display, products are undefined. I tried to do in two ways:</p>
  
  <pre><code>this.store.select(getProducts).subscribe(products =&gt; {
    console.log('products', products); // undefined
  });
  </code></pre>
  
  <p>and </p>
  
  <pre><code> this.products = this.store.select(getProducts); // Store
  </code></pre>
  
  <p>In second way I just get a whole Store...
  Code below.</p>
  
  <p>product.actions.ts</p>
  
  <pre><code>import { Action } from '@ngrx/store';
  import { Product } from '../../models/product.model';
  
  export const GET_PRODUCTS = 'Get_products';
  export const GET_PRODUCTS_SUCCESS = 'Get_products_success';
  
  export class GetProducts implements Action {
    readonly type = GET_PRODUCTS;
    constructor(public payload = '') {}
  }
  
  export class GetProductsSuccess implements Action {
    readonly type = GET_PRODUCTS_SUCCESS;
    constructor(public payload?: Product[]) {}
  }
  
  export type Actions = GetProducts | GetProductsSuccess;
  </code></pre>
  
  <p>product.reducer.ts</p>
  
  <pre><code>import { Product } from '../../models/product.model';
  import * as productAction from './products.action';
  
  export interface State {
    products: Product[];
    loading: boolean;
  }
  
  export const initialState: State = {
    products: [],
    loading: false,
  };
  
  export function ProductsReducer(state: State = initialState, action: productAction.Actions) {
  
    switch (action.type) {
      case productAction.GET_PRODUCTS:
        return {...state, loading: true};
  
      case productAction.GET_PRODUCTS_SUCCESS:
        const test = {...state, products: action.payload, loading: false};
        console.log("test", test);
        return test;
  
      default:
          return state;
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xqoY3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xqoY3.png" alt="enter image description here"></a></p>
  
  <p>product.effects.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Action } from '@ngrx/store';
  import { Effect, Actions } from '@ngrx/effects';
  import { AngularFirestore } from '@angular/fire/firestore';
  
  import { Product } from '../../models/product.model';
  import * as productAction from './products.action';
  
  import { Observable, of } from 'rxjs';
  import { switchMap, map, mergeMap } from 'rxjs/operators';
  
  
  @Injectable()
  export class ProductEffects {
  
    constructor(private actions$: Actions, private db: AngularFirestore) {}
  
    @Effect()
    getProducts: Observable&lt;Action&gt; = this.actions$
      .ofType(productAction.GET_PRODUCTS).pipe(
        switchMap(() =&gt; {
          return this.db.collection&lt;Product&gt;('products').valueChanges()
          .pipe(
            map((payload) =&gt; {
              return {
                type: 'Get_products_success',
                payload: payload
              };
            })
          );
        })
      );
  }
  </code></pre>
  
  <p>product.selector.ts</p>
  
  <pre><code>import { createSelector } from '@ngrx/store';
  
  import { State } from './products.reducer';
  import { Product } from '../../models/product.model';
  
  export function getState(state: State): State {
      return state;
  }
  
  export function fetchProducts(state: State): Product[] {
      return state.products;
  }
  
  export const getProducts = createSelector(getState, fetchProducts);
  </code></pre>
  
  <p>list.component.ts - get and display all products</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Store } from '@ngrx/store';
  import { Product } from '../../models/product.model';
  import * as productActions from '../../store/products/products.action';
  import { State } from '../../store/products/products.reducer';
  import { getProducts } from '../../store/products/products.selector';
  
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.scss']
  })
  export class ListComponent implements OnInit {
  
    products: Observable&lt;Product[]&gt;;
  
    constructor(private store: Store&lt;State&gt;) {}
  
    ngOnInit() {
      this.store.dispatch(new productActions.GetProducts);
      this.store.select(getProducts).subscribe(products =&gt; {
        console.log('products', products);
      });
  
    }
  
  }
  </code></pre>
  
  <p>If you noticed that I'm doing something wrong - don't shy to tell me.
  I really need your help. Thanks.</p>