title: Updating fails on my date object in template
body: <p>Actually, I'm stuck with a problem with ngxs (3.2.0) state management for my date object. I'm trying to update a display date in my app (Angular 6 app with the angular material), the action is correctly dispatched and the date object is changed within the state but the subscribers don't do anything when the date changed and therefore my template doesn't update. </p>
  
  <p>Here is my action file currentDate.action.ts :</p>
  
  <pre class="lang-ts prettyprint-override"><code>export class CreateDate {
      static readonly type = '[app] create date';
      constructor(public payload: Date) { }
  }
  
  export class ChangeDate {
      static readonly type = '[app] change date';
      constructor(public payload: Date) { }
  }
  
  export class IncrementDate {
      static readonly type = '[app] increment date';
      constructor() { }
  }
  
  export class DecrementDate {
      static readonly type = '[app] decrement date';
      constructor() { }
  }
  </code></pre>
  
  <p>Here is my currentDate.state.ts : </p>
  
  <pre class="lang-ts prettyprint-override"><code>export interface CurrentDateModel {
      selectedDate: Date;
      currentDate: Date;
      checker: number;
  }
  
  @State&lt;CurrentDateModel&gt;({
      name: 'currentDate',
      defaults: {
          currentDate: new Date(),
          selectedDate: new Date(),
          checker: 0
      },
  })
  export class CurrentDateState {
  
  @Action(CreateDate)
  createDate(ctx: StateContext&lt;CurrentDateModel&gt;, { payload }: CreateDate) {
      ctx.patchState({ currentDate: payload });
  }
  
  @Action(IncrementChecker)
  IncrementChecker(ctx: StateContext&lt;CurrentDateModel&gt;) {
      const state = ctx.getState();
      state.checker = state.checker + 1;
      ctx.setState(state);
  }
  
  @Action(IncrementDate)
  IncrementDate(ctx: StateContext&lt;CurrentDateModel&gt;) {
      const state = ctx.getState();
      state.selectedDate.setMonth(state.selectedDate.getMonth() + 1);
      ctx.setState(state);
  }
  
  @Action(DecrementDate)
  DecrementDate(ctx: StateContext&lt;CurrentDateModel&gt;) {
      const state = ctx.getState();
      state.selectedDate.setMonth(state.selectedDate.getMonth() - 1);
      ctx.setState(state);
  }
  
  @Action(ChangeDate)
  changeDate(ctx: StateContext&lt;CurrentDateModel&gt;, { payload }: ChangeDate) {
      ctx.patchState({ currentDate: payload });
  }
  </code></pre>
  
  <p>}</p>
  
  <p>The code in my header.ts file :</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
  
   @Select(state =&gt; state.currentDate.selectedDate) currentDate: Observable&lt;Date&gt;;
  
   @Select(state =&gt; state.currentDate.checker) check: Observable&lt;number&gt;;
  
    constructor(private store: Store) { }
  
    ngOnInit() {
      this.currentDate.subscribe((date) =&gt; console.log('hello from header', date));
      this.check.subscribe(() =&gt; console.log('i changed'));
    }
  
    increment() {
      this.store.dispatch(new IncrementChecker());
    }
  
    decrementDate() {
      this.store.dispatch(new DecrementDate());
    }
  
    incrementDate() {
      this.store.dispatch(new IncrementDate());
    }
  
  }
  </code></pre>
  
  <p>In my template.html file : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-toolbar color="primary"&gt;
    &lt;div&gt;
      &lt;a mat-button routerLink=""&gt;Test&lt;/a&gt;
    &lt;/div&gt;
    &lt;div&gt;{{check | async}}&lt;/div&gt;
    &lt;div&gt;&lt;mat-icon (click)="decrementDate()"&gt;arrow_left&lt;/mat-icon&gt;&lt;/div&gt;
    &lt;div&gt;{{currentDate  | async | date:'MMMM' | titlecase}}&lt;/div&gt;
    &lt;div&gt;&lt;mat-icon (click)="incrementDate()"&gt;arrow_right&lt;/mat-icon&gt;&lt;/div&gt;
    &lt;div fxFlex fxLayout fxLayoutAlign="flex-end"&gt;
      &lt;button mat-button&gt;Se connecter&lt;/button&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;button mat-button (click)="increment()"&gt;Increment&lt;/button&gt;&lt;/div&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>I tried many things (this is why you can see the "check" variable in my files too) but did not succeed to see the update with the date object but succeed to another object like my checker here or my others state objects.</p>
  
  <p>If you have any idea or if you see a big mistake in my code...</p>