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

Question

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

如果想要一个基于事件(可能是点击或 JavaScript 函数调用)发出新数据的可观察对象。例如，如果我有一个从 Web API 检索数据的 Observable，我不希望它继续发送 HTTP 请求，我只希望它发生在订阅者触发的事件上。场景可以是无限滚动(滚动触发事件)，经典分页(用户点击下一页触发事件)等

Answer 1

这是我根据评论和使用 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>);
  }
}