代码之家 › 专栏 › 技术社区 › jeanpaul62

异步定义HOC

higher-order-components reactjs

0

jeanpaul62 · 技术社区 · 8 年前

让我定义我的用例,这样会更容易解释。

我在用这个包裹 localforage-observable ,基本上是通过 localForage.newObservable() 每当本地饲料中的项目发生更改时激发。

然后我有一个 recompose 临时的, mapPropsStream ,它接受这个可观察的值并将该值传递到包装的组件中。

  const withLocalForage = mapPropsStream((props$) => {
    return props$.pipe(
      combineLatest(localForage.newObservable(), (props, lf) => {
        return { ...props, lf };
      })
    );
  });

  export default withLocalForage

所以在我的反应部分,我是

import './withLocalForage';

@withLocalForage
class MyComp extends React.Component {
  render() {
    return <div>{JSON.stringify(this.props.lf)}</div>
  }
}

这是可行的,除了一个问题: Currently localForage Observables should only be created after localforage.ready() (当地饲料观察医生)。

唯一的问题是,在应用程序加载时, 本地饲料.newObservable() 没有定义;只有当我定义 localForage.ready().then(() => { /* do something with localForage.newObservable() */})

我希望这篇文章的标题现在更清楚了:在我的案例中,我如何定义 withLocalForage 异步的HOC,所以它只在 localForage.ready() ?

1 回复 | 直到 8 年前

1

0

Estus Flask 8 年前

这是合理的 newObservable 链子 localforage.ready() 在内部。由于情况并非如此,这很可能需要手动完成:

  const localforage$ = from(localForage.ready()).pipe(
    switchMap(() => localForage.newObservable())
  );

  const withLocalForage = mapPropsStream((props$) => {
    return props$.pipe(
      combineLatest(localforage$, (props, lf) => {
        return { ...props, lf };
      })
    );
  });