带ngrx-store的离子无限卷轴

Question

我正在尝试将Ionic's Infinite Scroll与来自添加到ngrx存储的api的分页数据一起使用，但我不确定我是否完全理解如何工作。

我找到了this SO answer来帮助处理可观察数据，但是从存储中获取数据就有点不同了。我不能订阅来自api的响应，因为它是由一个效果处理的。

下面是我的简化代码：

模板

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of (items | async).results">
      <h2>{{ item.name }}</h2>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="infiniteScrolling$.next($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

组件

export class InventoryPage {
  items: Observable<Items>;
  infiniteScrolling$: Subject<any> = new Subject();

  constructor(
    public store: Store<AppState>,
    public itemsActions: ItemsActions
  ) {}

  ngOnInit() {
    this.items = this.store.select(appState => appState.items);
    this.store.dispatch(createAction('FETCH_ITEMS'));

    // What should this.infiniteScrolling$ do here since dispatching
    // actions does not return an observable?
  }
}

商店

const initialState = { results: [] };

export function itemsReducer(items: Items = initialState, action: Action): Items {
  switch (action.type) {
    case 'FETCH_ITEMS_SUCCESS':
      return { results: [...items.results, ...action.payload.results] };
    default:
      return items;
  }
}

我是在正确的轨道上吗?如果是，当数据从接口返回后，我应该在哪里调用infiniteScroll.complete()？

Answer 1

如果你使用的是NgRx，加载微调器的状态(无论它是显示还是隐藏)应该保存在你的存储中。这对于Ionic的无限滚动实现来说有点棘手，因为微调器的可见性并没有绑定到您可以轻松链接到state的变量。在它们的实现中，微调控制项在ionInfinite发出时自动显示，您必须在调度的事件上显式调用complete才能再次隐藏它。

如果您可以将一个输入传递给ion- input scroll元素以显示或隐藏加载微调器，这将是最理想的。然后，您可以在存储中保存一个loading变量，该变量捕获请求的状态并将其传递给ion- in scroll元素。当发出ionInfinite时，只需发送一个操作来获取下一页结果。在您的reducer中，request操作应将loading设置为true (因此微调器将显示)，而在效果中调度的sucess操作应将其设置回false (因此微调器将再次隐藏)。

由于Ionic不会开箱即用，因此您可以添加一个指令来实现此行为：

import { Directive, HostListener, Input, OnChanges, SimpleChanges } from "@angular/core";

@Directive({
  selector: '[appInfiniteScroll]'
})
export class InfiniteScrollDirective implements OnChanges {

  @Input() loading: boolean;

  private event: CustomEvent;

  @HostListener('ionInfinite', ['$event'])
  public onIonInfinite(event: CustomEvent) {
    this.event = event;
  }

  public ngOnChanges(changes: SimpleChanges): void {
    if (changes.loading && !this.loading && this.event) {
      (this.event as any).complete();
      this.event = null;
    }

  }

}

然后将其添加到ion-infinite scroll元素中，并将加载状态变量传递给loading输入：

<ion-infinite-scroll 
  appInfiniteScroll
  [loading]="loading$ | async"
  (ionInfinite)="fetchNextPage()">
  <ion-infinite-scroll-content>
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

如果有用的话，我在StackBlitz中提供了一个示例。

Answer 2

我有这个：

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">

doInfinite(event) {
  this.store.dispatch({type: SET_FILTER, payload});
  event.target.complete();
}