Why is ngrx ignoring my initial store value

Issue

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.

The actions:

    import { Action } from "@ngrx/store";
    import { ToDoItem } from "./models";

    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();
      }
      }

The reducer:

     import { ToDoItem } from "./models";
     import { ActionBase ,ToDoActions} from "./todo.actions";
     
     export interface ToDoState 
     {
         items : ToDoItem [] ;
     }
     
     const initialstate: ToDoState = <ToDoState>{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 ;
         }
     }

App component:

     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<ToDoItem[]> ;
     
       constructor(private store :Store<ToDoState>) 
       {
         this.todoList = this.store.pipe(select('items')) ;
       }
     }
     

App module:

     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 { }

The view

<div>
  <table class="table table-striped table-bordered table-sm" >
    <tr>
    <th>Name</th>
    <th>status</th>
    </tr>
    <tr *ngFor="let item of todoList| async">
      <td>{{item.taskVal}}</td>
      <td>{{item.completed}}</td>
    </tr>
  </table>
</div>

Solution

The issue was a misconfigured reducer , this fix

 import { ToDoItem } from "./models";
     import { ActionBase ,ToDoActions} from "./todo.actions";
     
     export interface ToDoState 
     {
         items : ToDoItem [] ;
     }
     
     const initialstate: ToDoItem= [new ToDoItem('todo item', false)];
     
     
     export function todoReducer(state : TotoItem[]= initialstate, action: ActionBase) : any{
         switch (action.type) {
           case ToDoActions.Add :
           return {...state, items : [...state.items, action.payload]} ;
           default :
           return state ;
         }
     }

and the module should have been configured

StoreModule.forRoot({items:todoReducer})

Answered By - mLar