异步定义 HOC

Question

让我来定义我的用例，它会更容易解释。

我正在使用包 localforage-observable，它基本上通过 localForage.newObservable() 创建一个 Observable，每次在 localforage 中更改项目时都会触发。

然后我有一个 recompose HOC，mapPropsStream，它接受这个 Observable 并将值传递给包装的组件。

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

  export default withLocalForage

所以在我的 React 组件中，我这样做

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()（localforage-observable 的文档）。

唯一的问题是，在应用程序加载时，localForage.newObservable() 未定义；仅当我执行 localForage.ready().then(() => { /* do something with localForage.newObservable() */})

时才定义

我希望 post 的标题现在更清楚了：我如何在我的案例中异步定义 withLocalForage HOC，以便它只在 localForage.ready() 之后定义？

Answer 1

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 };
      })
    );
  });

异步定义 HOC

Define HOC asyncly

reactjs

higher-order-components