title: Cannot read properties of undefined (reading 'map') NGRX Entity
body: <p>It happens on the selectAll selector, I Have looked at other answers and I am using a createfeatureSelector, to call the state. I have managed to dispatch actions, save the state to the store but I can't use the selectors. Any help would be highly appreciated.</p>
  <pre><code>ERROR TypeError: Cannot read properties of undefined (reading 'map')
      at ngrx-entity.mjs:21
      at ngrx-store.mjs:697
      at memoized (ngrx-store.mjs:578)
      at defaultStateFn (ngrx-store.mjs:601)
      at ngrx-store.mjs:700
      at memoized (ngrx-store.mjs:578)
      at ngrx-store.mjs:697
      at memoized (ngrx-store.mjs:578)
      at defaultStateFn (ngrx-store.mjs:601)
      at ngrx-store.mjs:700
  </code></pre>
  <p>todos.actions.ts</p>
  <pre><code>import { Update } from &quot;@ngrx/entity&quot;;
  import { createAction, props } from &quot;@ngrx/store&quot;;
  import { Todo } from &quot;../../../models/todo.interface&quot;;
  
  export enum TodosActionTypes {
    GET_TODOS = '[todos] get todos',
    GET_TODOS_FAIL = '[todos] get todos fail',
    GET_TODOS_SUCCESS = '[todos] get todos success',
    ADD_TODO = '[todo] add todo',
    EDIT_TODO = '[todo] edit todo',
    DELETE_TODO = '[todo] delete todo',
  }
  
  const getTodos = createAction(TodosActionTypes.GET_TODOS);
  const getTodosFail = createAction(TodosActionTypes.GET_TODOS_FAIL, props&lt;{error: Error}&gt;());
  const getTodosSuccess = createAction(TodosActionTypes.GET_TODOS_SUCCESS, props&lt;{todos: Todo[]}&gt;());
  const editTodo = createAction(TodosActionTypes.EDIT_TODO, props&lt;{edit: Update&lt;Todo&gt;, completed: boolean}&gt;());
  const deleteTodo = createAction(TodosActionTypes.DELETE_TODO, props&lt;{id: string}&gt;());
  const addTodo = createAction(TodosActionTypes.ADD_TODO, props&lt;{todo: Todo}&gt;());
  
  export const TodosActions = {
    getTodos,
    getTodosFail,
    getTodosSuccess,
    editTodo,
    deleteTodo,
    addTodo
  };
  
  </code></pre>
  <p>todos.reducer.ts</p>
  <pre><code>import { createEntityAdapter, EntityAdapter, Update } from '@ngrx/entity';
  import { createReducer, on } from '@ngrx/store';
  import { Todo } from '../../../models/todo.interface';
  import { TodosState } from '../../../models/todos-state.interface';
  import { TodosActions } from '../actions/todos.actions';
  
  export function selectTodoId(a: Todo): string {
    return a.id;
  }
  export function sortByName(a: Todo, b: Todo): number {
    return a.name.localeCompare(b.name);
  }
  export const adapter: EntityAdapter&lt;Todo&gt; = createEntityAdapter&lt;Todo&gt;({
    selectId: selectTodoId,
    sortComparer: sortByName,
  });
  
  export const initalState: TodosState = adapter.getInitialState({
    loading: false,
    loaded: false,
    error: {
      message: '',
      name: '',
    },
  });
  
  function getTodosHandler(state = initalState) {
    return {
      ...state,
      loading: true,
    };
  }
  function getTodosFailHandler(state = initalState, action: { error: Error }) {
    return {
      ...state,
      loading: false,
      loaded: true,
      error: action.error,
    };
  }
  
  function getTodosSuccessHandler(
    state = initalState,
    action: { todos: Todo[] }
  ) {
    return adapter.addMany(action.todos, {
      ...state,
      loading: false,
      loaded: true,
    });
  }
  function editTodosHandler(state = initalState, action: { edit: Update&lt;Todo&gt; }) {
    return adapter.updateOne(action.edit, {
      ...state,
    });
  }
  function deleteTodoHandler(state = initalState, action: { id: string }) {
    return adapter.removeOne(action.id, {
      ...state,
    });
  }
  function addTodoHandler(state = initalState, action: {todo: Todo}) {
    return adapter.addOne(action.todo, {
      ...state,
    })
  }
  export const TodosReducer = createReducer(
    initalState,
    on(TodosActions.getTodos, getTodosHandler),
    on(TodosActions.getTodosFail, getTodosFailHandler),
    on(TodosActions.getTodosSuccess, getTodosSuccessHandler),
    on(TodosActions.editTodo, editTodosHandler),
    on(TodosActions.deleteTodo, deleteTodoHandler),
    on(TodosActions.addTodo, addTodoHandler)
  );
  
  </code></pre>
  <p>todos.selectors.ts</p>
  <pre><code>import { createFeatureSelector, createSelector } from '@ngrx/store';
  import { TodosState } from '../../../models/todos-state.interface';
  import { adapter } from '../reducers/todos.reducers';
  import { Todo } from '../../../models/todo.interface';
  
  
  
  const { selectIds, selectEntities, selectAll, selectTotal } =
    adapter.getSelectors();
  
    export const getTodosFeatureState =
    createFeatureSelector&lt;TodosState&gt;('todos');
  
  
  const getTodosLoading = (state: TodosState): boolean =&gt; state.loading;
  const getTodosLoaded = (state: TodosState): boolean =&gt; state.loaded;
  
  const selectAllTodos = createSelector(getTodosFeatureState, selectAll);
  
  
  const selectCompletedTodos = createSelector(selectAllTodos, (todos: Todo[]) =&gt; todos.filter(todo =&gt; todo.completed === true));
  
  const selectTodosLoading = createSelector(getTodosFeatureState, getTodosLoading);
  
  const selectTodosLoaded = createSelector(getTodosFeatureState, getTodosLoaded);
  
  const selectAllTodosIds = createSelector(getTodosFeatureState, selectIds);
  
  const selectAllTodosEntities = createSelector(getTodosFeatureState, selectEntities);
  
  const selectTodosTotal = createSelector(getTodosFeatureState, selectTotal);
  
  export const TodosSelectors = {
    selectAllTodos,
    selectCompletedTodos,
    selectTodosLoading,
    selectTodosLoaded,
    selectAllTodosIds,
    selectAllTodosEntities,
    selectTodosTotal
  }
  
  </code></pre>
  <p>todos-index.reducer.ts</p>
  <pre><code>import { ActionReducerMap } from '@ngrx/store';
  import { TodosState } from '../../../models/todos-state.interface';
  import * as fromTodosReducer from './todos.reducers';
  
  
  export interface TodosFeatureState {
    todos: TodosState;
  }
  
  export const reducers: ActionReducerMap&lt;TodosFeatureState&gt; = {
    todos: fromTodosReducer.TodosReducer,
  };
  
  </code></pre>
  <p>todos.effect.ts</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { Actions, createEffect, ofType } from '@ngrx/effects';
  import { catchError, map, switchMap, take, } from 'rxjs';
  import { Todo } from '../../../models/todo.interface';
  import { TodosService } from '../../../services/todos.service';
  import { TodosActions, TodosActionTypes } from '../actions/todos.actions';
  
  @Injectable()
  export class TodosEffects {
    constructor(private todosService: TodosService, private actions$: Actions) {}
    loadTodos$ = createEffect(() =&gt;
      this.actions$.pipe(
        ofType(TodosActionTypes.GET_TODOS),
        switchMap(() =&gt;
          this.todosService.getTodos().pipe(
            take(1),
            map((todos: Todo[]) =&gt; TodosActions.getTodosSuccess({ todos })),
            catchError(async (error: Error) =&gt;
              TodosActions.getTodosFail({ error })
            )
          )
        )
      )
    );
  
  }
  
  </code></pre>
  <p>todosStateModule</p>
  <pre><code>import { NgModule } from &quot;@angular/core&quot;;
  import { EffectsModule } from &quot;@ngrx/effects&quot;;
  import { StoreModule } from &quot;@ngrx/store&quot;;
  import { SnackBarService } from &quot;../../services/snackbar.service&quot;;
  import { TodosEffects } from &quot;./effects/todos.effects&quot;;
  import * as fromTodos from './reducers/todos-index.reducers';
  
  @NgModule({
    imports: [
        StoreModule.forFeature('todos', fromTodos.reducers),
        EffectsModule.forFeature([TodosEffects]),
    ],
    providers:[SnackBarService]
  })
  export class TodosNgrxStateModule {}
  
  </code></pre>
  <p>My package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;marin-software&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;nx&quot;,
      &quot;postinstall&quot;: &quot;node ./decorate-angular-cli.js &amp;&amp; ngcc --properties es2015 browser module main&quot;,
      &quot;start&quot;: &quot;nx serve&quot;,
      &quot;build&quot;: &quot;nx build&quot;,
      &quot;test&quot;: &quot;nx test&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/cdk&quot;: &quot;^13.1.1&quot;,
      &quot;@angular/common&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/compiler&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/core&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/forms&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/material&quot;: &quot;^13.1.1&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/router&quot;: &quot;~13.1.0&quot;,
      &quot;@ngrx/effects&quot;: &quot;^13.0.2&quot;,
      &quot;@ngrx/entity&quot;: &quot;^13.0.2&quot;,
      &quot;@ngrx/store&quot;: &quot;^13.0.2&quot;,
      &quot;@ngrx/store-devtools&quot;: &quot;^13.0.2&quot;,
      &quot;@nrwl/angular&quot;: &quot;13.3.9&quot;,
      &quot;@tailwindcss/forms&quot;: &quot;^0.4.0&quot;,
      &quot;@tailwindcss/typography&quot;: &quot;^0.5.0&quot;,
      &quot;rxjs&quot;: &quot;~7.4.0&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;zone.js&quot;: &quot;~0.11.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~13.1.0&quot;,
      &quot;@angular-eslint/eslint-plugin&quot;: &quot;~13.0.1&quot;,
      &quot;@angular-eslint/eslint-plugin-template&quot;: &quot;~13.0.1&quot;,
      &quot;@angular-eslint/template-parser&quot;: &quot;~13.0.1&quot;,
      &quot;@angular/cli&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~13.1.0&quot;,
      &quot;@angular/language-service&quot;: &quot;~13.1.0&quot;,
      &quot;@nrwl/cli&quot;: &quot;13.3.9&quot;,
      &quot;@nrwl/cypress&quot;: &quot;13.3.9&quot;,
      &quot;@nrwl/eslint-plugin-nx&quot;: &quot;13.3.9&quot;,
      &quot;@nrwl/jest&quot;: &quot;13.3.9&quot;,
      &quot;@nrwl/linter&quot;: &quot;13.3.9&quot;,
      &quot;@nrwl/nx-cloud&quot;: &quot;latest&quot;,
      &quot;@nrwl/tao&quot;: &quot;13.3.9&quot;,
      &quot;@nrwl/workspace&quot;: &quot;13.3.9&quot;,
      &quot;@types/jest&quot;: &quot;27.0.2&quot;,
      &quot;@types/node&quot;: &quot;14.14.33&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;~5.3.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;~5.3.0&quot;,
      &quot;cypress&quot;: &quot;^9.1.0&quot;,
      &quot;eslint&quot;: &quot;8.2.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;8.1.0&quot;,
      &quot;eslint-plugin-cypress&quot;: &quot;^2.10.3&quot;,
      &quot;jest&quot;: &quot;27.2.3&quot;,
      &quot;jest-preset-angular&quot;: &quot;11.0.0&quot;,
      &quot;prettier&quot;: &quot;^2.3.1&quot;,
      &quot;tailwindcss&quot;: &quot;^3.0.7&quot;,
      &quot;ts-jest&quot;: &quot;27.0.5&quot;,
      &quot;typescript&quot;: &quot;~4.4.3&quot;
    }
  }
  
  </code></pre>
  <pre><code>export interface TodosState extends EntityState&lt;Todo&gt; 
  { 
  loading: boolean;
  loaded: boolean;
  error: Error;
  }
  </code></pre>