title: Why is ngrx ignoring my initial store value
body: <p>I have this basic Todo applications using Ngrx, but I am struggling to make it work. I am unable to get the initial state which is an array of TodoItems to get displayed.</p>
  <p><strong>The actions:</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import { Action } from &quot;@ngrx/store&quot;;
      import { ToDoItem } from &quot;./models&quot;;
  
      export enum ToDoActions {
      Add = 'Add customer' ,
      Remove = 'Remove customer'
      }
      export class ActionBase implements Action {     readonly  type : any;         payload: any}
  
      export class AddItemClass  extends ActionBase {
      readonly  type =  ToDoActions.Add  ;
      constructor(public payload : any) {
        super();
      }
      }
  
  
      export class RemoveItemClass  extends ActionBase {
      readonly  type =  ToDoActions.Remove  ;
      constructor(public payload : any) {
          super();
        }
        }
  </code></pre>
  <p><strong>The reducer:</strong></p>
  <pre class="lang-js prettyprint-override"><code>     import { ToDoItem } from &quot;./models&quot;;
       import { ActionBase ,ToDoActions} from &quot;./todo.actions&quot;;
       
       export interface ToDoState 
       {
           items : ToDoItem [] ;
       }
       
       const initialstate: ToDoState = &lt;ToDoState&gt;{items : [new ToDoItem('todo item', false)]};
       
       
       export function todoReducer(state : ToDoState = initialstate, action: ActionBase) : ToDoState {
           switch (action.type) {
             case ToDoActions.Add :
             return {...state, items : [...state.items, action.payload]} ;
             default :
             return state ;
           }
       }
  
  </code></pre>
  <p><strong>App component</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>     import { Component } from '@angular/core';
       import { select, Store } from '@ngrx/store';
       import { Observable } from 'rxjs';
       import { ToDoItem, TodoList } from './models';
       import { AddItemClass } from './todo.actions';
       import { ToDoState } from './todo.reducer';
       @Component({
         selector: 'app-root',
         templateUrl: './app.component.html',
         styleUrls: ['./app.component.css']
       })
       export class AppComponent {
       
        
         todoList: Observable&lt;ToDoItem[]&gt; ;
       
         constructor(private store :Store&lt;ToDoState&gt;) 
         {
           this.todoList = this.store.pipe(select('items')) ;
         }
       }
       
  </code></pre>
  <p><strong>App module</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>     import { NgModule } from '@angular/core';
       import { FormsModule } from '@angular/forms';
       import { BrowserModule } from '@angular/platform-browser';
       import { StoreModule } from '@ngrx/store';
       
       import { AppComponent } from './app.component';
       import { todoReducer } from './todo.reducer';
       
       @NgModule({
         declarations: [
           AppComponent
         ],
         imports: [
           BrowserModule,FormsModule, StoreModule.forRoot(todoReducer)
         ],
         providers: [],
         bootstrap: [AppComponent]
       })
       export class AppModule { }
  </code></pre>
  <p><strong>The view</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;table class=&quot;table table-striped table-bordered table-sm&quot; &gt;
      &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;status&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr *ngFor=&quot;let item of todoList| async&quot;&gt;
        &lt;td&gt;{{item.taskVal}}&lt;/td&gt;
        &lt;td&gt;{{item.completed}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>