Using max with Selectors

Question

I want to write a selector that gets all questions, get the object which has maximum order and return this order (which is a number). So what I thought was: I have to select all my questions, get max order and map this order. But I don't know.

The selector:

export const selectQuestions = (state: AppState) => state.questions;

The selector I want to write:

export const getLastOrderIndex = createSelector(
  select(selectQuestions), 
  max<Question>((a: Question, b: Question) => a.order < b.order ? -1 : 1),
  map(x => x.order)
)

The log error (visual studio code gives me):

No overload matches this call.
  Overload 1 of 32, '(s1: Selector<Observable<AppState>, Observable<Question>>, s2: Selector<Observable<AppState>, Observable<any>>, projector: (s1: Observable<...>, s2: Observable<...>) => Observable<...>): MemoizedSelector<...>', gave the following error.
    Argument of type '(source$: Observable<AppState>) => Observable<QuestionState>' is not assignable to parameter of type 'Selector<Observable<AppState>, Observable<Question>>'.
      Type 'Observable<QuestionState>' is not assignable to type 'Observable<Question>'.
        Type 'QuestionState' is missing the following properties from type 'Question': id, type, sectionName, order, and 4 more.
  Overload 2 of 32, '(s1: SelectorWithProps<Observable<AppState>, unknown, Observable<Question>>, s2: SelectorWithProps<Observable<AppState>, unknown, Observable<...>>, projector: (s1: Observable<...>, s2: Observable<...>, props: unknown) => Observable<...>): MemoizedSelectorWithProps<...>', gave the following error.
    Argument of type '(source$: Observable<AppState>) => Observable<QuestionState>' is not assignable to parameter of type 'SelectorWithProps<Observable<AppState>, unknown, Observable<Question>>'.
      Type 'Observable<QuestionState>' is not assignable to type 'Observable<Question>'

I know there are something very wrong but I don't know where. Can anyone explain me? I read all the docs but I know I missed something.

Answer 1

I think you are creating your selector incorrectly. You are trying to use RxJS operators where there is no observable.

Instead, you could use reduce to find the max:

export const selectQuestions = (state: AppState) => state.questions;

export const selectMaxOrder = createSelector(
  selectQuestions,
  (questions: Array<Question>) => questions
    .reduce(
      (max, cur) => cur.order > max ? cur.order : max,
      0
    )
);

Then in your component/facade you can use the selector as:

maxOrder$ = this.store.pipe(select(selectMaxOrder));