title: How to get and update data from the ngrx store into Observable variable?
body: <p>I got pretty simple feature module with store/reducers/etc created by @ngrx/schematics. In this feature module i got 2 components - form and items list which is empty by default and u can add items via form. When i add something via form action works, reducer get payload but items list in second component doesn't update. </p>
  
  <p>items list html:</p>
  
  <pre><code>&lt;section class="sub-list"&gt;
    &lt;div class="container"&gt;
      &lt;header class="sub-list--header"&gt;&lt;h1&gt;My Subscriptions&lt;/h1&gt;&lt;/header&gt;
      &lt;span *ngIf="length$ | async"&gt;Subscriptions count - {{ length$ | async }}&lt;/span&gt;
      &lt;main class="sub-list--content" *ngIf="list$ | async as list"&gt;
        &lt;div class="sub-list--item" *ngFor="let item of list"&gt;
          &lt;div class="name"&gt;{{ item.name }}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>items list component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MatSnackBar } from '@angular/material';
  import { Store } from '@ngrx/store';
  import { Observable } from 'rxjs';
  
  // Store
  import * as fromSub from '../../reducers/subscription.reducer';
  import * as subActions from '../../actions/subscription.actions';
  // Models
  import { Subscription } from '../../models/Subscription';
  
  @Component({
    selector: 'app-sub-list',
    templateUrl: './sub-list.component.html',
    styleUrls: ['./sub-list.component.scss']
  })
  export class SubListComponent implements OnInit {
    list$: Observable&lt;Subscription[]&gt;;
    length$: Observable&lt;number&gt;;
    constructor(
      private snackBar: MatSnackBar,
      private subStore: Store&lt;fromSub.State&gt;
    ) {
      this.list$ = this.subStore.select('subscriptionsList');
      this.length$ = this.subStore.select('length');
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>form component(just in case i did action dispatch wrong):</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MatSnackBar } from '@angular/material';
  import { Store } from '@ngrx/store';
  
  // Store
  import * as fromSub from '../../reducers/subscription.reducer';
  import * as subActions from '../../actions/subscription.actions';
  // Models
  import { Subscription } from '../../models/Subscription';
  
  @Component({
    selector: 'app-sub-form',
    templateUrl: './sub-form.component.html',
    styleUrls: ['./sub-form.component.scss']
  })
  export class SubFormComponent implements OnInit {
    name: string;
    price: number;
    link: string;
    date: Date;
    constructor(
      private snackBar: MatSnackBar,
      private subStore: Store&lt;fromSub.State&gt;
    ) {
      this.price = 0;
    }
  
    ngOnInit() {
    }
  
    addSubscription = (): void =&gt; {
      // Snackbar test
      if (!this.name) {
        this.snackBar.open('Name field is empty', 'Close', { duration: 3000 });
        return;
      }
      // if (this.link === '') {}
      if (this.price &lt; 0) {
        return;
      }
      if (!this.date) {
        this.snackBar.open('Date field is empty', 'Close', { duration: 3000 });
        return;
      }
      const newSub: Subscription = {
        name: this.name,
        price: this.price,
        link: this.link,
        date: this.date,
      };
      this.subStore.dispatch(new subActions.AddSubscription(newSub));
      this.snackBar.open('Subscription added', 'Close', { duration: 3000 });
    }
  }
  </code></pre>
  
  <p>module reducer:</p>
  
  <pre><code>import { SubscriptionActions, SubscriptionActionTypes } from '../actions/subscription.actions';
  import { Subscription } from '../models/Subscription';
  
  export interface State {
    length: number;
    subscriptionsList: Subscription[];
  }
  
  export const initialState: State = {
    length: 0,
    subscriptionsList: [],
  };
  
  export function reducer(state = initialState, action: SubscriptionActions): State {
    switch (action.type) {
  
      case SubscriptionActionTypes.LoadSubscriptions:
        return state;
  
      case SubscriptionActionTypes.AddSubscription:
        return Object.assign({}, state, {
          subscriptionsList: state.subscriptionsList.concat(action.payload),
          length: state.subscriptionsList.length + 1
        });
  
      default:
        return state;
    }
  }
  
  </code></pre>
  
  <p>So it might be the problem in reducer(wrong store update) or in component(wrong select or wrong provider)</p>