Angular NGRX Added EntityState, EntityAdapter, only returning 1 record instead of all

[Wild Mind]

I got a working Angular NGRX UI Table loaded with all the record (Over 100) and just added the following import to work with NGRX EntityState, EntityAdapter etc.

import { createFeatureSelector, createSelector} from "@ngrx/store"; import { EntityState, EntityAdapter, createEntityAdapter } from "@ngrx/entity";

After I added the entityAdapter, I just got 1 record back. I placed a breakpoint in the loadSuccess and VS Code shows over 100 records added with the .AddMany method but I can't figure out why only 1 record is returning to the UI.

If I use .AddMany with over 100 records returning from the api, shouldn't the selector return all of them?

Here is my code so far with my comments. Any help is greatly appreciated.

export interface MyRecordViewModel{ records: MyRecord[]; columns: string[]; } export interface MyFormState extends EntityState<MyRecordViewModel> { selectedRecordId: number | null; columns: string[]; loading: boolean; loaded: boolean; error: string; } export interface AppState extends fromRoot.AppState { myForms: MyFormState } export const myAdapter: EntityAdapter<MyRecordViewModel> = createEntityAdapter<MyRecordViewModel>(); export const defaultFdForm: MyStateState = { ids: [], entities: {}, //this will contain/manage MyRecordViewModel array of records columns: [], selectedRecordId: null, loaded: false, loading: false, error: "" } export const initialState = adapter.getInitialState(defaultFdForm); export function myReducer( state = initialState, action: myActions.Actions ) : MyFormState { switch(action.type) { case myActions.myActionTypes.LOAD_RECORDS: { return { ...state, loading: true } } case myActions.myActionTypes.LOAD_RECORDS_SUCCESS: { return myAdapter.addMany( // use the addMany to add the api data action.payload.records, { // place a breakpoint here and VS Code clearly shows over 100 records ...state, columns: action.payload.columns, loading: false, loaded: true } ) // return { // this was the old code without entityadapter that works // ...state, // loading: false, // loaded: true, // //viewModel: action.payload, // columns: action.payload.columns, // records: action.payload.records, // } } default : { return state; } } } const getMyRecordsFeatureState = createFeatureSelector<myFormState>( "myForms" ); export const getRecords = createSelector( getMyRecordsFeatureState, myAdapter.getSelectors().selectAll // this is the new code and it returns 1 record, not sure why or how to troubleshoot this. //(state: MyFormState) => state.records // old code that works );