将 max 与选择器一起使用答案

【问题标题】：Using max with Selectors将 max 与选择器一起使用
【发布时间】：2021-02-02 11:44:02
【问题描述】：

我想编写一个选择器来获取所有问题，获取具有最大顺序的对象并返回此顺序（这是一个数字）。所以我的想法是：我必须选择我所有的问题，获得最大订单并映射这个订单。但我不知道。

选择器：

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

我要写的选择器：

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

日志错误（Visual Studio 代码给我）：

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>'

我知道有些地方很不对劲，但我不知道在哪里。谁能解释我？我阅读了所有文档，但我知道我错过了一些东西。

【问题讨论】：

标签： angular rxjs ngrx reactivex

【解决方案1】：

我认为您创建的选择器不正确。您正在尝试在没有 observable 的情况下使用 RxJS 运算符。

相反，您可以使用 reduce 来找到最大值：

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
    )
);

然后在您的组件/外观中，您可以将选择器用作：

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

【讨论】：