Question

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

如果要具有一个可观察到的事件，该事件根据事件（可以是单击或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>);
  }
}

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

1 个答案: