title: TypeScript/Angular/Ngrx - Trying to access the state, getting back an array but can't access any elements
body: <p><strong>notes.reducer.ts:</strong></p>
  <pre><code>import { Action, createReducer, on, } from &quot;@ngrx/store&quot;;
  
  import * as NotesActions from &quot;./notes.actions&quot;
  import { Note } from &quot;../note.model&quot;;
  
  
  export interface NotesState {
    notes: Note[]
  }
  
  const initialState: NotesState = {
    notes: [new Note('title', 'body')]
  }
  
  const _notesReducer = createReducer(
    initialState,
    on(
      NotesActions.saveNewNote,
      (state, action) =&gt; ({
        ...state,
        notes: state.notes.concat(action.note)
      })
    )
  )
  
  export function notesReducer(state: NotesState, action: Action) {
    return _notesReducer(state, action)
  }
  </code></pre>
  <p><strong>note-list.component.ts:</strong></p>
  <pre><code>import { Store } from '@ngrx/store';
  import { Subscription } from 'rxjs';
  import { Note } from '../note.model';
  import { NotesState } from '../store/notes.reducer';
  
  @Component({
    selector: 'app-note-list',
    templateUrl: './note-list.component.html',
    styleUrls: ['./note-list.component.css']
  })
  export class NoteListComponent implements OnInit {
  
    notesArray!: Note[]
    notesSubscription: Subscription;
  
    constructor(private store: Store&lt;NotesState&gt;) { }
  
    ngOnInit(): void {
      this.notesSubscription = this.store.select('notes').subscribe((notes: Note[]) =&gt; {
        this.notesArray = notes;
        console.log(notes)
        console.log(notes[0])
      })
    }
  
    ngOnDestroy(): void {
      this.notesSubscription.unsubscribe()
    }
  
  } 
  </code></pre>
  <p><strong>note.model.ts:</strong></p>
  <pre><code>export class Note {
    constructor(public title: string, public body: string) {}
  }
  </code></pre>
  <p><strong>app.module.ts:</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { ReactiveFormsModule } from '@angular/forms';
  import { BrowserModule } from '@angular/platform-browser';
  import { StoreModule } from '@ngrx/store';
  import { StoreDevtoolsModule } from '@ngrx/store-devtools'
  import { environment } from 'src/environments/environment';
  
  
  import { AppComponent } from './app.component';
  import { NoteDetailComponent } from './note-detail/note-detail.component';
  import * as fromNotes from './store/notes.reducer';
  import { NoteListComponent } from './note-list/note-list.component';
  import { NoteTileComponent } from './note-list/note-tile/note-tile.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      NoteDetailComponent,
      NoteListComponent,
      NoteTileComponent
    ],
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      StoreModule.forRoot({notes: fromNotes.notesReducer}),
      StoreDevtoolsModule.instrument({logOnly: environment.production}),
  
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>The output of the console.logs are:</p>
  <p><em>{notes: Array(1)}
  notes: Array(1)
  0: Note {title: 'title', body: 'body'}
  length: 1
  [[Prototype]]: Array(0)
  [[Prototype]]: Object</em></p>
  <p>and</p>
  <p><em>undefined</em></p>
  <p>What am I doing wrong here? The object I'm getting back obviously contains data, but I have no way of accessing it.  If I try to iterate through notes, I get an error telling me that notes is not iterable. If I try to use an Array function such as notes.forEach, it tells me that it is not a valid function. I thought maybe it's returning the notes array wrapped inside an object, but notes.notes tells me that 'notes' does not exist on type 'Note[]', and notes.keys returns undefined.</p>
  <p><img src="https://i.stack.imgur.com/2KbtX.png" alt="screenshot of console output" /></p>