[NgRx] NgRx Data Fetching Solution - How to Load Data Only If Needed

Posted 2022-12-23 answer1215

We have a reoslver, which everytime we want visit ‘/courses‘ route, it will be triggered, then api will be called, data will be loaded.

import  Injectable  from "@angular/core";
import 
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
 from "@angular/router";
import  Observable  from "rxjs";
import  Store  from "@ngrx/store";
import  AppState  from "../reducers";
import  CoursesAction  from "./actions-types";
import  tap, first, finalize  from "rxjs/operators";
import  adapter  from "./reducers/courses.reducers";

@Injectable()
export class CoursesResolver implements Resolve<any> 
  loading = false;
  constructor(private store: Store<AppState>) 

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> 
    return this.store.pipe(
      tap(() => 
        if (!this.loading) 
          this.loading = true;
          this.store.dispatch(CoursesAction.loadAllCourse());
        
      ),
      // this resolve need to complete, so we can use first()
      first(),
      finalize(() => (this.loading = false))
    );
  

 

So how to prevent reload the data if we have already loaded the data once?

Add one prop into state: ‘allCoursesLoaded‘

import  Course, compareCourses  from "../model/course";
import  EntityState, createEntityAdapter  from "@ngrx/entity";
import  createReducer, on  from "@ngrx/store";
import  CoursesAction  from "../actions-types";
/*
export interface CoursesState 
  entities:  [key: number]: Course ;
  ids: number[];
*/

export interface CoursesState extends EntityState<Course> 
  /**Extend the entity here */
  allCoursesLoaded: boolean;


export const adapter = createEntityAdapter<Course>(
  sortComparer: compareCourses
  // selectId: course => course.id // NgRx use ‘id‘ by default
);

export const initCoursesState = adapter.getInitialState(
  allCoursesLoaded: false
);

export const coursesReducer = createReducer(
  initCoursesState,
  on(CoursesAction.allCoursesLoaded, (state, action) =>
    adapter.addAll(action.courses,  ...state, allCoursesLoaded: true )
  )
);

export const  selectAll  = adapter.getSelectors();

Now we can modify the resolver:

import  Injectable  from "@angular/core";
import 
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
 from "@angular/router";
import  Observable  from "rxjs";
import  Store, select  from "@ngrx/store";
import  AppState  from "../reducers";
import  CoursesAction  from "./actions-types";
import  tap, first, finalize, filter  from "rxjs/operators";
import  adapter  from "./reducers/courses.reducers";
import  selectAllCoursesLoaded  from "./courses.selectors";

@Injectable()
export class CoursesResolver implements Resolve<any> 
  loading = false;
  constructor(private store: Store<AppState>) 

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> 
    return this.store.pipe(
      select(selectAllCoursesLoaded),
      tap(courseLoaded => 
        if (!this.loading && !courseLoaded) 
          this.loading = true;
          this.store.dispatch(CoursesAction.loadAllCourse());
        
      ),
      // this resolve need to complete, so we can use first()
      filter(courseLoaded => courseLoaded),
      first(),
      finalize(() => (this.loading = false))
    );