title: Angular Ngrx 8 Selector error: Cannot read property 'map' of undefined
body: <p>I am struggling with Ngrx 8 Selectors. I have managed to query data and save it into the store, but I get this error "Cannot read property 'map' of undefined" whenever I try to use selectors. </p>
  
  <p><strong>Effects File(ects-users.effects.ts)</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Actions, ofType, createEffect } from '@ngrx/effects';
  import { of } from 'rxjs';
  import { map, catchError, switchMap } from 'rxjs/operators';
  
  import * as fromExternalUsersActions from './external-user/external-user.actions';
  import { UsersService } from '../../shared/services/crud/users.service';
  import { ExternalUser } from './external-user/external-user.model';
  
  
  
  
  @Injectable()
  export class EctsUsersEffects {
  
    loadExternalUsersDetails$ = createEffect(() =&gt;
      this.actions$
        .pipe(
          ofType(fromExternalUsersActions.initialLoadExternalUsers),
          switchMap(() =&gt;
            this.externalUsersService.getAll()
              .pipe(
                map((externalUsers: any) =&gt; {
                  const list: ExternalUser[] = externalUsers.payload;
                  return fromExternalUsersActions.loadExternalUsers({ externalUsers: list });
                }),
                catchError(error =&gt; of(fromExternalUsersActions.loadExternalUsersFailure({ error })))
              ))
        ));
  
  
  
  
  
  
    constructor(private actions$: Actions, private externalUsersService: UsersService) { }
  
  }
  </code></pre>
  
  <p><strong>Actions File(external-user.actions.ts)</strong></p>
  
  <pre><code>import { createAction, props } from '@ngrx/store';
  import { Update } from '@ngrx/entity';
  
  import { ExternalUser } from './external-user.model';
  
  
  export const initialLoadExternalUsers = createAction(
    '[ExternalUser/API] Initial Load ExternalUsers',
  );
  
  export const loadExternalUsersFailure = createAction(
    '[ExternalUser/API] Load ExternalUsers Failure',
    props&lt;{ error: any }&gt;()
  );
  
  export const loadExternalUsers = createAction(
    '[ExternalUser/API] Load ExternalUsers',
    props&lt;{ externalUsers: ExternalUser[] }&gt;()
  );
  
  
  
  export const addExternalUser = createAction(
    '[ExternalUser/API] Add ExternalUser',
    props&lt;{ externalUser: ExternalUser }&gt;()
  );
  
  export const upsertExternalUser = createAction(
    '[ExternalUser/API] Upsert ExternalUser',
    props&lt;{ externalUser: ExternalUser }&gt;()
  );
  
  export const addExternalUsers = createAction(
    '[ExternalUser/API] Add ExternalUsers',
    props&lt;{ externalUsers: ExternalUser[] }&gt;()
  );
  
  export const upsertExternalUsers = createAction(
    '[ExternalUser/API] Upsert ExternalUsers',
    props&lt;{ externalUsers: ExternalUser[] }&gt;()
  );
  
  export const updateExternalUser = createAction(
    '[ExternalUser/API] Update ExternalUser',
    props&lt;{ externalUser: Update&lt;ExternalUser&gt; }&gt;()
  );
  
  export const updateExternalUsers = createAction(
    '[ExternalUser/API] Update ExternalUsers',
    props&lt;{ externalUsers: Update&lt;ExternalUser&gt;[] }&gt;()
  );
  
  export const deleteExternalUser = createAction(
    '[ExternalUser/API] Delete ExternalUser',
    props&lt;{ id: string }&gt;()
  );
  
  export const deleteExternalUsers = createAction(
    '[ExternalUser/API] Delete ExternalUsers',
    props&lt;{ ids: string[] }&gt;()
  );
  
  export const clearExternalUsers = createAction(
    '[ExternalUser/API] Clear ExternalUsers'
  );
  </code></pre>
  
  <p><strong>External Users Reducer (external-user.reducer.ts)</strong></p>
  
  <pre><code>import { Action, createReducer, on } from '@ngrx/store';
  import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
  import { ExternalUser } from './external-user.model';
  import * as ExternalUserActions from './external-user.actions';
  
  export const externalUsersFeatureKey = 'externalUsers';
  
  export interface State extends EntityState&lt;ExternalUser&gt; {
    loaded: boolean;
    loading: boolean;
    ids: string[];
  }
  
  export const adapter: EntityAdapter&lt;ExternalUser&gt; = createEntityAdapter&lt;ExternalUser&gt;();
  
  export const initialState: State = adapter.getInitialState({
    loaded: false,
    loading: false,
    ids: [],
  });
  
  const externalUserReducer = createReducer(
    initialState,
    on(ExternalUserActions.addExternalUser,
      (state, action) =&gt; adapter.addOne(action.externalUser, state)
    ),
    on(ExternalUserActions.upsertExternalUser,
      (state, action) =&gt; adapter.upsertOne(action.externalUser, state)
    ),
    on(ExternalUserActions.addExternalUsers,
      (state, action) =&gt; adapter.addMany(action.externalUsers, state)
    ),
    on(ExternalUserActions.upsertExternalUsers,
      (state, action) =&gt; adapter.upsertMany(action.externalUsers, state)
    ),
    on(ExternalUserActions.updateExternalUser,
      (state, action) =&gt; adapter.updateOne(action.externalUser, state)
    ),
    on(ExternalUserActions.updateExternalUsers,
      (state, action) =&gt; adapter.updateMany(action.externalUsers, state)
    ),
    on(ExternalUserActions.deleteExternalUser,
      (state, action) =&gt; adapter.removeOne(action.id, state)
    ),
    on(ExternalUserActions.deleteExternalUsers,
      (state, action) =&gt; adapter.removeMany(action.ids, state)
    ),
    on(ExternalUserActions.loadExternalUsers,
      (state, action) =&gt; adapter.addAll(action.externalUsers,
        {...state,
            loaded: true
        })
    ),
    on(ExternalUserActions.clearExternalUsers,
      state =&gt; adapter.removeAll(state)
    ),
  );
  
  export function reducer(state: State | undefined, action: Action) {
    return externalUserReducer(state, action);
  }
  
  export const getLoaded = (state: State) =&gt; state.loaded;
  
  export const getLoading = (state: State) =&gt; state.loading;
  
  export const getIds = (state: State) =&gt; state.ids;
  
  export const {
    selectIds,
    selectEntities,
    selectAll,
    selectTotal,
  } = adapter.getSelectors();
  </code></pre>
  
  <p><strong>Selectors File (external-users.selectors.ts)</strong></p>
  
  <pre><code>import { createFeatureSelector, createSelector } from '@ngrx/store';
  import { ectsUsersFeatureKey} from '../reducers';
  import * as fromExternalUsers from './external-user.reducer';
  
  export const selectExternalUsersState = createFeatureSelector&lt;fromExternalUsers.State&gt;(ectsUsersFeatureKey);
  
  export const selectAllUsers = createSelector(
      selectExternalUsersState,
      fromExternalUsers.selectAll
  );
  
  export const selectExternalUsers = createSelector(
      selectAllUsers,
      externalUsers =&gt; {
          return externalUsers.filter(externalUser =&gt; !externalUser.user.isInternalUser);
      }
  );
  </code></pre>
  
  <p><strong>General Reducer File (index.ts)</strong></p>
  
  <pre><code>import {
    ActionReducerMap,
    MetaReducer
  } from '@ngrx/store';
  import { environment } from '../../../../environments/environment';
  import * as fromExternalUser from '../external-user/external-user.reducer';
  import * as fromOffice from '../office/office.reducer';
  
  export const ectsUsersFeatureKey = 'ectsUsers';
  
  
  export interface State {
  
    [fromExternalUser.externalUsersFeatureKey]: fromExternalUser.State;
    [fromOffice.officesFeatureKey]: fromOffice.State;
  }
  
  export const reducers: ActionReducerMap&lt;State&gt; = {
  
    [fromExternalUser.externalUsersFeatureKey]: fromExternalUser.reducer,
    [fromOffice.officesFeatureKey]: fromOffice.reducer,
  };
  
  
  export const metaReducers: MetaReducer&lt;State&gt;[] = !environment.production ? [] : [];
  </code></pre>
  
  <p><strong>Error I see on the Console</strong></p>
  
  <pre><code>core.js:4002 ERROR TypeError: Cannot read property 'map' of undefined
      at entity.js:29
      at store.js:581
      at memoized (store.js:523)
      at defaultStateFn (store.js:550)
      at store.js:584
      at memoized (store.js:523)
      at store.js:581
      at memoized (store.js:523)
      at defaultStateFn (store.js:550)
      at store.js:584
  </code></pre>