How to use the @ngxs/store.Selector function in @ngxs/store

name: 'filter',
  defaults: {
    location: { latitude: 39.833333, longitude: -98.583333 }, // default location is 'Geographic center of the contiguous United States'
    distance: 50,
    rating: 4,
    reviews: 100
  },
  children: [AutocompleteState]
})
export class FilterState {
  @Selector()
  public static filter(state: FilterStateModel): FilterStateModel {
    return state;
  }

  @Selector()
  public static location(state: FilterStateModel): Location {
    return state.location;
  }

  @Selector()
  public static distance(state: FilterStateModel): number {
    return state.distance;
  }

  @Action(SetLocation)
  setLocation({ getState, setState }: StateContext, { payload }: SetLocation) {
    setState({ ...getState(), location: payload });
  }

  @Action(SetDistance)
  setDistance({ getState, setState }: StateContext, { payload }: SetDistance) {

availableEvents: [],
    availableFunctionEvents: [],
    availableShells: [],
    availableBoundDatas: [],
    availableTriggerEventsList: [],
    isFormBuilderValid: false
  }
})
export class PageBuilderState {

  constructor(
    private pagesClient: PagesClient,
    private shellConfig: ShellConfigProvider
  ) { }

  @Selector()
  public static getState(state: PageBuilderStateModel) {
    return state;
  }

  @Action(PageActions.InitCreatePageBuilderAction)
  public initCreate(ctx: StateContext, { }: PageActions.InitCreatePageBuilderAction) {
    const state = ctx.getState()
    return ctx.setState({
      ...state,
      filterState: PageActions.InitCreatePageBuilderAction
    })
  }

  @Action(PageActions.InitEditPageBuilderAction)
  public initEdit(ctx: StateContext, { page }: PageActions.InitEditPageBuilderAction) {
    const state = ctx.getState()

static type = 'RemoveTodo';

  constructor(public readonly payload: number) {}
}

export class TodoStateModel {
  todo: string[];
  pizza: { model: any };
}

@State({
  name: 'todo',
  defaults: []
})
export class TodoState implements NgxsOnInit {
  @Selector()
  static pandas(state: string[]) {
    return state.filter(s => s.indexOf('panda') > -1);
  }

  ngxsOnInit({ getState, setState }: StateContext) {
    const state: string[] = getState();
    const payload = 'NgxsOnInit todo';
    if (!state.includes(payload)) {
      setState([...state, payload]);
    }
  }

  @Action(AddTodo)
  addTodo({ getState, setState }: StateContext, { payload }: AddTodo) {
    setState([...getState(), payload]);
  }

rows: number[];
}

@State({
  name: 'ddbselection',
  defaults: {
    column: null,
    rows: []
  }
}) export class DDBSelectionState {

  @Selector() static getColumn(state: DDBSelectionStateModel): string {
    return state.column;
  }

  @Selector() static getRows(state: DDBSelectionStateModel): number[] {
    return state.rows;
  }

  /** ctor */
  constructor(private store: Store) { }

  @Action(AddRowToSelection)
  addRowToSelection({ dispatch, getState, patchState }: StateContext,
                    { payload }: AddRowToSelection) {
    const { row } = payload;
    const state = getState();
    if (!state.rows.includes(row)) {
      const rows = state.rows.slice(0);
      rows.push(row);
      patchState({ rows });
      dispatch(new SelectionRowsUpdated({ rows }));

}

  @Selector()
  static getSelectedBook(state: BooksStateModel) {
    return state.selectedBookId && state.entities[state.selectedBookId];
  }

  @Selector([CollectionState])
  static isSelectedBookInCollection(
    state: BooksStateModel,
    collectionState: CollectionStateModel
  ) {
    return collectionState.ids.indexOf(state.selectedBookId) > -1;
  }

  @Selector([CollectionState])
  static getBookCollection(
    state: BooksStateModel,
    collectionState: CollectionStateModel
  ): Book[] {
    const entities = state.entities;
    const ids = [...collectionState.ids];

    return ids.map(id => entities[id]);
  }

  @Selector([SearchState])
  static getSearchResults(
    state: BooksStateModel,
    searchState: SearchStateModel
  ) {
    const searchIds = [...searchState.ids];

@Selector()
  public static canUseSpeechSynthesis(state: ChatBoxStateModel) {
    return state.canUseSpeechSynthesis;
  }

  @Selector()
  public static loading(state: ChatBoxStateModel) {
    return state.loading;
  }

  @Selector()
  static getConversations(state: ChatBoxStateModel) {
    return state.conversations;
  }

  @Selector()
  static getActiveConversation(state: ChatBoxStateModel) {
    return state.conversations[state.conversations.findIndex(con => con.id === state.activeConversationId)];
  }

  @Selector()
  static getConversationById(id: string) {
    return createSelector(
      [ChatBoxState],
      (state: ChatBoxStateModel) => {
        return state.conversations.find(con => con.id === id);
      },
    );
  }

  @Selector()
  static getVoices(state: ChatBoxStateModel) {

}

  @Selector()
  public static version(state: AppStateModel): string {
    return state.version;
  }
  @Selector()
  public static activeTheme(state: AppStateModel): Theme {
    return state.activeTheme;
  }

  @Selector()
  public static displayedNotificationVersion(state: AppStateModel): number {
    return state.displayedNotificationVersion;
  }
  @Selector()
  public static sendFeedback(state: AppStateModel): boolean | null {
    return state.sendFeedback;
  }

  @Action(ServiceWorkerNotificationDisplayed)
  public serviceWorkerNotificationDisplayed(ctx: StateContext) {
    const state = ctx.getState();
    ctx.setState({
      ...state,
      serviceWorkerNotificationDisplayed: true
    });
  }

  @Action(SetVersion)
  public setVersion(ctx: StateContext, action: SetVersion) {
    const state = ctx.getState();

/**
   * we can give a part of state through clean function,
   * in current case we give away article title or status message
   */
  @Selector()
  static articleTitle(state: WikiArticlesState): string {
    if (state.selectetId && !state.content) {
      return 'Loading...';
    }

    return state.content ? state.content.parse.title : 'Empty';
  }

  /** give away raw article content */
  @Selector()
  static content(state: WikiArticlesState): string | null {
    return state.content && state.content.parse.text['*'];
  }

  /**
   * It is dangerous pacticle to give away part of the State as not primitive variable,
   * any component can unnoticed mutate it that is very bad for project.
   * For create immutable variable we can use popular library Immer.
   * For the more laconic code we can use decorator ImmutableSelector from the @ngxs-labs/immer-adapter library
   */
  @Selector()
  @ImmutableSelector()
  static favorites(state: WikiArticlesState): SearchItem[] {
    return state.favorites;
  }

}

    return siteSettings[siteSlug];
  }

  @Selector([SiteSettingsState.getCurrentSiteSettings])
  static getCurrentSiteTemplate(_, currentSiteSettings): string | undefined {
    if (!currentSiteSettings) {
      return;
    }
    const templateSettings = currentSiteSettings.find(settingGroup => settingGroup.slug === 'template');
    const template = templateSettings && templateSettings.settings.find(setting => setting.slug === 'template');
    return template && template.value;
  }

  @Selector([SiteSettingsState.getCurrentSiteSettings])
  static getCurrentSiteLanguage(_, currentSiteSettings): string | undefined {
    if (!currentSiteSettings) {
      return;
    }
    const languageSettings = currentSiteSettings.find(settingGroup => settingGroup.slug === 'language');
    const language = languageSettings && languageSettings.settings.find(setting => setting.slug === 'language');
    return language && language.value;
  }

  constructor(
    private store: Store,
    private actions$: Actions,
    private appStateService: AppStateService,
    private fileUploadService: FileUploadService) {
  }

return state.content ? state.content.parse.title : 'Empty';
  }

  /** give away raw article content */
  @Selector()
  static content(state: WikiArticlesState): string | null {
    return state.content && state.content.parse.text['*'];
  }

  /**
   * It is dangerous pacticle to give away part of the State as not primitive variable,
   * any component can unnoticed mutate it that is very bad for project.
   * For create immutable variable we can use popular library Immer.
   * For the more laconic code we can use decorator ImmutableSelector from the @ngxs-labs/immer-adapter library
   */
  @Selector()
  @ImmutableSelector()
  static favorites(state: WikiArticlesState): SearchItem[] {
    return state.favorites;
  }

  /** give away article content id */
  @Selector()
  static selectId(state: WikiArticlesState): number | null {
    return state.selectetId;
  }

  /**
   * add new favorite to favorite list,
   * array.push operator mutate State, so we use ImmutableContext decorator for get immutable variable of State
   */
  @Action(AddFavorite)