See also questions close to this topic

• Global ErrorHandler is not working after implementing catchError in ngrx effect

  I am trying to handle the error in my angular application but global error handler is not working.

  I am using ngrx for state management and have a global error handler in my angular application. I am using catchError operator to handle the error in ngrx/effects as suggested here. But now I am not able to use global error handler and I have to catchError in each effect.

  //ErrorHandler

  handleError(error: Error | HttpErrorResponse) {
    const router = this.injector.get(Router);
    console.error("Error intercepted.", error);
    this.spinner.hide();
    if (error instanceof HttpErrorResponse) {
       if (!navigator.onLine) {
          this.showError('No internet connection');
       } else {
          if (error.error.message) {
              this.showError(`${error.error.message}`);
          } else {
              this.showError(`${error.status} - ${error.message}`);
          }
       }
    } else {
       this.showError("Unknow error.");
       router.navigate(['/dashboard']);
      }
  }
  

  //ngrx effects

  export class EffectError implements Action {
      readonly type = '[Error] Effect Error';
  }
  
  @Effect()
  UserAuth: Observable < Action > = this.actions.pipe(
    ofType(SigninActions.AUTHENTICATE_USER),
    switchMap((action: SigninActions.AuthenticateUser) =>
      this.signinService.signin(action.payload.emailAddress, action.payload.password).pipe(
          map((loginContext: LoginContext) => {
              console.log("LOGIN_CONTEXT", loginContext);
              return new SigninActions.AuthenticateUserSuccess(loginContext)
          }),
          //CatchError
          catchError(() => of(new EffectError()))
      )
     )
  );
  

  I am using catchError operator so that effect does not get break whenever an error occurs and global error handler to show different error messages.
• Load new data every time component is rendered or use store data

  I'm trying to understand the benefits of Redux pattern coupled together with Angular 2 but one question constantly pops up in my mind.

  Let's say I have a dashboard page where I load the most popular products on my website. When I first-time visit this page an API call will be sent to get the products from the server and I store those products in my store. Until now everything is good. From the dashboard page, I click to go to on another page and in few seconds I go back to the dashboard. When I come back to the dashboard page I have some data in the store that I can display to the user. The question is, should I send a new API request to get the most updated data or should I just display data from the store? Here are scenarios we can analyze:

  Display data from the store

  If I display data from the store, that data might not be the most updated data that is currently available on the server but I saved one API call. Another question is how and when to update store data or better to say when my store data is invalidated?

  Send API request

  On the other side if I send API call every time I go to dashboard then what is the benefit of storing that data in the store (because I'm updating store every time when the component is rendered). This way I always get the most updated data from the API that I then can but I don't have to save in the store because of any way that data will be in the store until I visit my dashboard page again. This way I also contact my API all the time which is not ideal.

  Question

  What is the approach you are using?
• Don't understand immutable objects

  I'm using Ngxs and discovered developmentMode. I turned it on and I have some new errors that I don't understand.

  In my store I have filters. I've made a facade function that gets them and adjust.

  filterBarFiltrySnapshot(obiektId: Obiekty): any[] {
      let filtry = this.store.selectSnapshot((state: AppStateModel) => state.obiektyConfig[obiektId].filterBarFiltry);
      if (filtry) {
        filtry = filtry.map(item => {
          if (item.formValue) {
            Object.values(item.formValue).forEach(item2 => {
              item2.value = this.wstawianieWartosciService.wstaw(item2.value, obiektId);
            });
          }
          return item;
        });
      }
      return filtry;
    }
  

  Typescript says that TypeError: Cannot assign to read only property 'value' of object '[object Object]'.

  But why? this.store.selectSnapshot returns array and shouldn't it be a copy of this in store? Event when I change code to this:

  let filtry = [
      ...this.store.selectSnapshot((state: AppStateModel) => state.obiektyConfig[obiektId].filterBarFiltry)
  ];
  

  there still is error.

  How to change code to meet immutable restrictions?
• How to assign state value into string variable in Angural Component [ngrx Store]

  This is my code. But It gives error.

  public productKey: string;
  
      constructor(private store: Store<AppState>) {
        this.productKey = store.pipe(select('product'), map((productState: ProductState) => productState.productKey));
      }
  
• How to share a module selector to other module component?

  I am using ngrx/store, where there is a header module it require to show the calendar list. in calendar module i have a selector like this: I am using lazy loadings

  import { State } from "./../../state/app.state";
  import { EventState, ModelEvent } from "./../models/model.event";
  
  import { createFeatureSelector, createSelector, ActionReducerMap } from "@ngrx/store";
  
  export interface NewState extends State {
      events:EventState
  }
  
  const getCalendarFeatureState = createFeatureSelector<NewState>("reducerCalendar");
  
  export const getEvents = createSelector(getCalendarFeatureState, state => {
      return state.events;  //how to call it from sharedMoudle under header component?
  });
  

  my shared module :

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { HeaderComponent } from './header/header.component';
  import { FooterComponent } from './footer/footer.component';
  import { SideNavComponent } from './side-nav/side-nav.component';
  import { HeaderNavComponent } from './components/header-nav/header-nav.component';
  import { HeaderNavShellComponent } from './containers/header-nav-shell/header-nav-shell.component';
  
  @NgModule({
      declarations: [
          HeaderComponent,
          FooterComponent,
          SideNavComponent,
          HeaderNavComponent,
          HeaderNavShellComponent
      ],
      imports: [
          CommonModule
      ],
      exports: [
          HeaderComponent,
          FooterComponent,
          SideNavComponent,
          HeaderNavComponent, //requires "getEvents" value.
          HeaderNavShellComponent
      ]
  })
  export class SharedModule { }
  
• `@ngrx/store` - createFeatureSelector never called from wrapper component

  Here is my createFeatureSelector ts file :

  import { State } from "./../../state/app.state";
  import { EventState, ModelEvent } from "./../models/model.event";
  
  import { createFeatureSelector, createSelector, ActionReducerMap } from "@ngrx/store";
  
  export interface NewState extends State {
      events:EventState
  }
  
  const getCalendarFeatureState = createFeatureSelector<EventState>("reducer");
  
  export const getEvents = createSelector(getCalendarFeatureState, state =>  state.events );
  

  my events shell component ( where i call the getEvents ):

  import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
  import { Store, select } from '@ngrx/store';
  import { Observable } from 'rxjs';
  
  import * as fromRoot from  "./../../state";
  import { CalendarActions, Load } from "./../../state/calendar.actions";
  import { ModelEvent, EventState } from "./../../models/model.event";
  
  @Component({
      selector: 'calendar-shell',
      templateUrl: './calendar-shell.component.html',
      changeDetection:ChangeDetectionStrategy.OnPush
  })
  export class CalendarShellComponent implements OnInit {
  
      events$:Observable<any>
  
      constructor(private store:Store<fromRoot.NewState>) { }
  
      ngOnInit():void{
  
          this.store.dispatch(new Load());
          this.events$ = this.store.pipe(select(fromRoot.getEvents)); //getting nothing!!
  
      }
  
  }
  

  template :

  <div *ngIf="events$ |  async"> //shows nothing!!
      <ul>
          <li *ngFor="let item of events">{{item.title}}</li>
      </ul>
  </div>
  

  Any help? thanks in advance. ( ready to provide further details if any )