Error encountered in Angular NGRX while accessing the store: Trying to read property 'map' of an undefined variable

Question

Error encountered in Angular NGRX while accessing the store: Trying to read property 'map' of an undefined variable

I have integrated NGRX effects into my Angular application and encountered the following error. I'm uncertain if I am using the selector correctly in my component to query the store?

core.js:6162 ERROR TypeError: Cannot read property 'map' of undefined
  at ngrx-entity.js:21
    at ngrx-store.js:1198
    at memoized (ngrx-store.js:1039)
    at defaultStateFn (ngrx-store.js:1079)
    at ngrx-store.js:1207
    at memoized (ngrx-store.js:1039)
    at ngrx-store.js:1078
    at Array.map (<anonymous>)

Component

ngOnInit() {
    this.initializeForModel();
    //this.users$ = this.store.select(getAllUsers);

    this.store.select(getAllUsers).pipe().subscribe((response:any)=> {
            this.listOfUser = response.users;
            this.userMange = this._createGroup();
        
      });

Selector

export const userFeatureSelector = createFeatureSelector<UserState>('users');

        export const getAllUsers = createSelector(
          userFeatureSelector,
          selectAll,
          selectIds
        );

Service

  constructor(private http: HttpClient) { }
          getAllUsers(): Observable<any> {
          return this.http.get("assets/user.json");
          }
        }

Reducer

  import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
           
           export interface UserState extends EntityState<User> {
      usersLoaded: boolean;
    }

export const adapter: EntityAdapter<User> = createEntityAdapter<User>();

export const initialState  = adapter.getInitialState({
  usersLoaded: false,
  users: [
  
  ],

});

export interface UserState {
  users: User[];
}
        
       export const userReducer = createReducer(
      initialState,
      on(UserActions.loadUsers, (state, { users }) => {
        return adapter.setAll(users, state);
      }),

Action

export const loadUsers = createAction(
      '[Users List] Load Users via Service',
      props<{ users: User[] }>()
    );

Effects

loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.loadUsers),
     mergeMap(() => this.UserService.getAllUsers()
     .pipe(
       map(users => ({ type: UserActions.loadUsers.type, payload: users }))
     // map(users =>  { {console.log(users)} return UserActions.usersLoaded({users})})()
    ))
    )
  );

angular typescript ngrx ngrx-effects ngrx-entity

Answer 1

Answer №1

To utilize the map functionality within Effects, make sure to import it along with mergeMap and catchError from the rxjs/operators library. Here's an example:

import { map, mergeMap, catchError } from "rxjs/operators";

Answer 2

To utilize the map functionality within Effects, make sure to import it along with mergeMap and catchError from the rxjs/operators library. Here's an example:

import { map, mergeMap, catchError } from "rxjs/operators";

Answer 3

Answer №2

Have you noticed the missing return value from the selector? Also, the effect should be returning an action which it seems like yours is not doing. Are you encountering any errors as well? If you don't want to dispatch anything, consider adding { dispatch: false} as the second parameter to the createEffect() function.

export const getAllUsers = createSelector(
  userFeatureSelector,
  selectAll,
  selectIds
  (feature, all, ids) => ({ feature, all, ids }) // In VS Code, a faulty underline will appear under the selector without this line
);

EDIT: You can also try dispatching an action from the effect or marking it as an effect without dispatch

loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.loadUsers),
    mergeMap(() => this.UserService.getAllUsers()
      .pipe(
        map(users => ({ type: UserActions.loadUsers.type, payload: users }))
      ))
    ),
    { dispatch: false} // Add this parameter so that the effect does not need to dispatch a new action
  );

I don't have much experience with NgRx entity/data, but in general, reducers execute before effects. So if you expect data in your loadUsers reducer to come from the backend, you might be mistaken. You should handle it as an action first, and then upon successful BE call, dispatch a new action (like `saveUsers`) that will update the data.

EDIT 2: It seems I now understand what you were trying to achieve. Were you attempting to modify the payload of the loadUsers action using the effect? Consider this approach:

// actions
export const loadUsers = createAction('[Users List] Load Users via Service'); // empty 
export const saveUsers = createAction('[Users Effect] Save Users', props<{ users: User[] }>());

// reducer
on(UserActions.saveUsers, (state, { users }) => {
  return adapter.setAll(users, state);
}),

// effects
loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.loadUsers),
    concatMap(() => this.UserService.getAllUsers()),
    map(users => UserActions.saveUsers({ users }))       
  ));

If I interpret correctly, the error arises from NgRx Entity because the payload in your loadUsers reducer is undefined. Your attempt to update the payload in the effect actually occurs after the reducer execution.

Answer 4

Have you noticed the missing return value from the selector? Also, the effect should be returning an action which it seems like yours is not doing. Are you encountering any errors as well? If you don't want to dispatch anything, consider adding { dispatch: false} as the second parameter to the createEffect() function.

export const getAllUsers = createSelector(
  userFeatureSelector,
  selectAll,
  selectIds
  (feature, all, ids) => ({ feature, all, ids }) // In VS Code, a faulty underline will appear under the selector without this line
);

EDIT: You can also try dispatching an action from the effect or marking it as an effect without dispatch

loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.loadUsers),
    mergeMap(() => this.UserService.getAllUsers()
      .pipe(
        map(users => ({ type: UserActions.loadUsers.type, payload: users }))
      ))
    ),
    { dispatch: false} // Add this parameter so that the effect does not need to dispatch a new action
  );

I don't have much experience with NgRx entity/data, but in general, reducers execute before effects. So if you expect data in your loadUsers reducer to come from the backend, you might be mistaken. You should handle it as an action first, and then upon successful BE call, dispatch a new action (like `saveUsers`) that will update the data.

EDIT 2: It seems I now understand what you were trying to achieve. Were you attempting to modify the payload of the loadUsers action using the effect? Consider this approach:

// actions
export const loadUsers = createAction('[Users List] Load Users via Service'); // empty 
export const saveUsers = createAction('[Users Effect] Save Users', props<{ users: User[] }>());

// reducer
on(UserActions.saveUsers, (state, { users }) => {
  return adapter.setAll(users, state);
}),

// effects
loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.loadUsers),
    concatMap(() => this.UserService.getAllUsers()),
    map(users => UserActions.saveUsers({ users }))       
  ));

If I interpret correctly, the error arises from NgRx Entity because the payload in your loadUsers reducer is undefined. Your attempt to update the payload in the effect actually occurs after the reducer execution.

Answer 5

Answer №3

While I wasn't able to replicate the specific error you mentioned, I managed to successfully resolve the issue with the store.

The basic structure of a store is as follows:

Initiate an action

In this case, I modified the original action you were using to one without any payload.

Now, within my actions file, I defined two actions:

import { createAction, props } from "@ngrx/store";
import { User } from "../reducers/user.reducer";

export const loadUsers = createAction(
  "[Users List] Load Users"
);

export const loadUsersSuccess = createAction(
  "[Users List] Load Users Success",
  props<{ users: User[] }>()
);

And in the component, we would have:

this.store.dispatch(loadUsers());

The Effect receives the action and triggers another action

Once an action is dispatched, the effect will capture it. We then need to invoke the service, fetch data, and trigger a new action with the desired payload.

@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.loadUsers),
      mergeMap(() => this.UserService.getAllUsers()),
      map(users => UserActions.loadUsersSuccess({users}))
    )
  );

  constructor(private actions$: Actions, private UserService: MyService) {}
}

The Reducer captures the action and stores the data

export const userReducer = createReducer(
  initialState,
  on(UserActions.loadUsers, state => {
    return adapter.setAll(state.users, state);
  }),
  on(UserActions.loadUsersSuccess, (state, { users }) => {
    return adapter.setAll(users, state);
  })
);

Check out a demo on StackBlitz for reference.

Answer 6

While I wasn't able to replicate the specific error you mentioned, I managed to successfully resolve the issue with the store.

The basic structure of a store is as follows:

Initiate an action

In this case, I modified the original action you were using to one without any payload.

Now, within my actions file, I defined two actions:

import { createAction, props } from "@ngrx/store";
import { User } from "../reducers/user.reducer";

export const loadUsers = createAction(
  "[Users List] Load Users"
);

export const loadUsersSuccess = createAction(
  "[Users List] Load Users Success",
  props<{ users: User[] }>()
);

And in the component, we would have:

this.store.dispatch(loadUsers());

The Effect receives the action and triggers another action

Once an action is dispatched, the effect will capture it. We then need to invoke the service, fetch data, and trigger a new action with the desired payload.

@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.loadUsers),
      mergeMap(() => this.UserService.getAllUsers()),
      map(users => UserActions.loadUsersSuccess({users}))
    )
  );

  constructor(private actions$: Actions, private UserService: MyService) {}
}

The Reducer captures the action and stores the data

export const userReducer = createReducer(
  initialState,
  on(UserActions.loadUsers, state => {
    return adapter.setAll(state.users, state);
  }),
  on(UserActions.loadUsersSuccess, (state, { users }) => {
    return adapter.setAll(users, state);
  })
);

Check out a demo on StackBlitz for reference.

Error encountered in Angular NGRX while accessing the store: Trying to read property 'map' of an undefined variable

Answer №1

Answer №2

Answer №3

Similar questions

The DataGrid is only displaying a single result instead of multiple results

With *ngFor in Angular, radio buttons are designed so that only one can be selected

Deactivate multiple input fields by utilizing various radio buttons

Oops! A mistake was made by passing an incorrect argument to a color function. Make sure to provide a string representation of a color as the argument next time

The template is displaying the string as "[object Object]"

Functions designed to facilitate communication between systems

Issue with getStaticProps in Next.js component not functioning as expected

Ways to incorporate style links in Angular v2 components?

Tips for adding and verifying arrays within forms using Angular2

TypeScript - Converting into individual compiled files

Include a log out option in the side menu of the ionic2 application

What are the steps for changing this JavaScript file into TypeScript?

Is it possible to determine the time format preference of the user's device in Angular? For example, whether they use a 24-hour system or a 12-hour system with AM

Enforcement of Typescript Field Type Lax During Assignment

What is the best method to condense an array or extract only the valid values?

Is there a way to create fresh instances of a class using Injector rather than utilizing a singleton pattern?

Counting nodes that have the 'enabled' property: A guide

Is the utilization of the React context API in NextJS 13 responsible for triggering a complete app re-render on the client side

Discover how to access and manipulate JSON files in an Angular application using

Tips for adjusting fullcalendar's local property in an Angular application