[NgRx] NgRx Entity Adapter Configuration - Understanding sortComparer and selectId

Posted 2022-12-23 answer1215

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();

 

export function compareCourses(c1:Course, c2: Course) 

  const compare = c1.seqNo - c2.seqNo;

  if (compare > 0) 
    return 1;
  
  else if ( compare < 0) 
    return -1;
  
  else return 0;

 

‘sortCompoarer‘ is used with adapter when you want to sort the entites based on one prop, ‘ids‘ will be also sorted accordingly to the new entities.