Entity adapter and some of the CUD operations - reducer

events.reducer.ts

import * as fromEvents from '../actions/events.action';
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
import { Event } from '../../models/event.model';

export interface EventsState extends EntityState<EventEntity> {
  loaded: boolean;
  loading: boolean;
  error: Error;
}

export function sortDescByUpdatedDateTime(a: EventEntity, b: EventEntity) {
  return b.data.updatedDateTime - a.data.updatedDateTime;
}

// Note that you can build your custom sort function as above and pass it down
// to your entity adapter to automatically sort ids array based on your sort logic
export const eventEntityAdapter: EntityAdapter<EventEntity> = createEntityAdapter<EventEntity>({
  selectId: (event: EventEntity) => event.data.eventId,
  sortComparer: sortDescByUpdatedDateTime,
});

export const initialState: EventsState = eventEntityAdapter.getInitialState({
  loaded: false,
  loading: false,
  error: null,
});

export interface EventEntity {
  data: Event;
  read: boolean;
}

export function eventsReducer(state = initialState, action: fromEvents.EventsActionsUnion): EventsState {
  switch (action.type) {
    case fromEvents.EventsActionTypes.LoadAllEvents: {
      return {
        ...state,
        error: null,
        loading: true,
      };
    }

    // You can use one of the ...many operations here, based on your business requirements
    // addMany, updateMany and upsertMany are available
    case fromEvents.EventsActionTypes.LoadAllEventsSuccess: {
      return eventEntityAdapter.upsertMany(action.payload, {
        ...state,
        loading: false,
        loaded: true,
      });
    }

    case fromEvents.EventsActionTypes.LoadAllEventsFail: {
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    }

    case fromEvents.EventsActionTypes.ClearOldEvents: {
      const idsOfexpiredEntities = /* your logic here */;
      return eventEntityAdapter.removeMany(idsOfexpiredEntities, state);
    }

    // Changes object is an object with Partial<T> type of your entity interface
    // You can consider it as an object which will be deep merged to your entity
    case fromEvents.EventsActionTypes.ReadEvent: {
      return eventEntityAdapter.updateOne(
        {
          id: action.eventId,
          changes: {
            read: true,
          },
        },
        state,
      );
    }

    // Note that you need to provide an array of Update<T> to the updateMany operation
    // UpdateStr<T> = {
    //   id: string;
    //   changes: Partial<T>;
    // };
    case fromEvents.EventsActionTypes.ReadAllEvents: {
      return eventEntityAdapter.updateMany(
        [...state.ids].map((eventId: string) => ({
          id: eventId,
          changes: {
            read: true,
          },
        })),
        state,
      );
    }
  }
  return state;
}

export const getEventsLoading = (state: EventsState) => state.loading;
export const getEventsLoaded = (state: EventsState) => state.loaded;
export const getEventsError = (state: EventsState) => state.error;