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

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 {
  /**Extend the entity here */
  allCoursesLoaded: boolean;
}

export const adapter = createEntityAdapter({
  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.