Как реализовать пейджинговое решение с использованием RxJs?

Question

Каков наилучший способ реализовать пейджинговое решение в RxJs?

Если вы хотите иметь наблюдаемое, которое генерирует новые данные, основанные на событии (это может быть щелчок или вызов функции JavaScript).Например, если у меня есть Observable для извлечения данных из веб-API, и я не хочу, чтобы он просто продолжал отбрасывать 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>);
  }
}