Using NgxsFirestorePagination

news.database.ts

import { NgxsFirestorePagination} from '@ngxs-labs/firestore-plugin';

@Injectable({
  providedIn: 'root'
})
export class RacesService extends NgxsFirestorePagination<RacesStateModel> {
  path = 'Races';
  orderBy = 'created_at';
  orderByDirection = 'desc';
  format: (data) => data; //Each document format
}

news.state.ts

//...
import { NgxsFirestoreConnect } from '@ngxs-labs/firestore-plugin';
import { NgxsFirestorePagination} from '@ngxs-labs/firestore-plugin';
import { append, patch } from '@ngxs/store/operators';

export interface Article {
    title: string;
    created_at: number; //UNIX Timestamp
    content: string;
}

export interface RacesStateModel {
  items: Article[];
}

export class GetPage {
    public static readonly type = '[Races] Get Page';
}

export class ShowNewPage {
   public static readonlty type = '[Races] Show New Page';
   public constructor(payload?: {complete: () => void; error: () => void});
}

export class RacesState implements NgxsOnInit {
  @Selector()
  static articles(state: NewsStateModel) {
    return state.items;
  }
  constructor(
    private racesFS: RacesFirestore,
    private ngxsFirestoreConnect: NgxsFirestoreConnect    
  ){
  }

  ngxsOnInit(){
    this.ngxsFirestoreConnect.connect(RacesActions.GetAll, {
      to: () => this.racesFS.collection$()
    });
  }

  @Action(StreamConnected(RacesActions.GetPage))
  getConnected(ctx: StateContext<RacesStateModel>, { action }: Connected<RacesActions.Get>) {
      // do something when connected
  }

  @Action(StreamEmitted(RacesActions.GetPage))
  getEmitted(ctx: StateContext<RacesStateModel>, { action, payload }: Emitted<RacesActions.Get, Race>) {      
      ctx.setState(
            patch({
              races: append([...payload]),
            })
          );
  }

  @Action(StreamDisconnected(RacesActions.GetPage))
  getDisconnected(ctx: StateContext<RacesStateModel>, { action }: Disconnected<RacesActions.Get>) {
      // do something when disconnected
  }
  
  @Action(Fetch(RacesActions.ShowNewPage))
  showNewPage((ctx: StateContext<RacesStateModel>, { action, payload }: Fetch<any>)) {
      complete = () => console.log('Complete'); //payload.complete
      error = (err) => console.log(error);  //payload.error
      this.raceFs.fetch(complete, error);
  }
    
}