在 RxJs 中获取更多数据

Question

我在使用来自fromFetch的 fromFetch 获取“更多”数据时遇到一些问题。 我有 React 和 RXJS 的项目。 目前我正在使用这样的东西：

  const stream$ = fromFetch('https://pokeapi.co/api/v2/pokemon?limit=100', {
    selector: response => response.json()
  }).subscribe(data => console.log(data));

但是，我想动态更改限制。 当我单击按钮甚至更好时 - 当我滚动到网站的最底部时？ 如何基于一些交互来制作这样的东西？ 限制会改变吗？

Answer 1

在您的情况下，您可观察的工作方式是请求-响应。 您将 stream$ 声明为一个 observable，当有人订阅它时，它将发出 limit=100 的请求。

有不同的方法可以解决这个问题......最直接的方法是：

const getPokemon$ = limit =>
  fromFetch('https://pokeapi.co/api/v2/pokemon?limit=' + limit, {
    selector: response => response.json()
  });

const MyComponent = () => {
  // ...
  
  useEffect(() => {
    const sub = getPokemon$(limit).subscribe(res => console.log(res));

    return () => sub.unsubscribe();
  }, [limit])

  // ...
}

另一种选择，可能更具反应性但对其他人来说更难遵循，将声明另一个设置限制的 stream：

const limit$ = new BehaviorSubject(100)

const pokemon$ = limit$.pipe(
  switchMap(limit => fromFetch('https://pokeapi.co/api/v2/pokemon?limit=' + limit, {
    selector: response => response.json()
  }))
);

// In your component

const MyComponent = () => {
  // ...

  useEffect(() => {
    const sub = pokemon$.subscribe(res => console.log(res));

    return () => sub.unsubscribe();
  }, [])

  changeLimit = (newLimit) => limit$.next(newLimit)

  // ...
}

在另一个解决方案中，您声明了 pokemon$ 应如何对 limit$ 的更改做出反应，并且您可以从任何其他您想要的组件中设置 limit$。