[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<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.