如何使用 RxJs 实现分页解决方案？答案

【问题标题】：How to implement a paging solution using RxJs?如何使用 RxJs 实现分页解决方案？
【发布时间】：2018-12-18 22:24:38
【问题描述】：

在 RxJs 中实现分页解决方案的最佳方式是什么？

如果想要有一个基于事件（可能是点击或 JavaScript 函数调用）发出新数据的 observable。例如，如果我有一个 Observable 从 Web API 检索数据，并且我不希望它继续敲击 HTTP 请求，我只希望在订阅者触发的事件上发生这种情况。场景可以是无限滚动（滚动触发事件）、经典分页（用户点击下一页触发事件）等。

【问题讨论】：

pageChange$.pipe(switchMap(page => getItems(page))) 将是一个开始，pageChange$ 是 Subject<number>
看看stackoverflow.com/a/48674786/6680611
谢谢大家，添加了一个基于较新版本 RxJs 的工作示例
我一直只使用 take(itemsInPage) 和 skip(previousRows) 的组合。或者你可以在你的 api 端实现分页，然后在你的 UI 中忘记它。

标签： javascript typescript rxjs

【解决方案1】：

这是我基于 cmets 并使用 RxJs 6.3.3 提出的解决方案

export default class Test extends React.Component<any, any> {

  private subscription: Subscription;

  public componentDidMount() {
    const client = new MyClient();
    let source = client.get('/data');

    const buttonNotifier = defer(() => {
      console.log("waiting");
      return fromEventPattern(
        (handler) => { this.next = handler; }
      ).pipe(tap(() =>
        console.log("sending more data")
      ));
    });

    const pagedData: Observable<{Value:any, NextLink:string}> = source.pipe(
      expand(({ NextLink }) => NextLink ?
      buttonNotifier.pipe(take(1), concatMap(() => client.get(NextLink))) :
      empty()));

    this.subscription = pagedData.subscribe(
      result => {
          this.setState({
          Value: result.Value,
        });
      },
      error => {
        this.setState({
          Error: `ERROR: ${error}`
        });
      },
      () => {
        this.setState({
          Done: `DONE`
        });
      }
    );
  }

  public componentWillUnmount() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  private next: Function;

  public render(): React.ReactElement<any> {
    return (<button onClick={()=> {this.next();}}>Next</button>);
  }
}

【讨论】：