RxJS 和 React 的 setState - 延迟函数执行直到订阅

Question

RxJS 有一个漂亮的函数，fromCallback 接受一个最后一个参数是回调的函数和 returns 一个 Observable。我想将它与 React 的 setState 函数结合起来，这样我就可以做一些类似的事情：

const setState = Rx.Observable.fromCallback(this.setState);
setState({ myState: 'Hi there!' }).concat(....)

这样任何链接到 setState 的操作都保证在设置状态后发生，最重要的是，只有在有活动订阅者时才会调用 setState。

不过我注意到，即使没有订阅，setState 也会按其定义和设置组件状态的方式被正确调用。所以如果我有：

networkSignal.flatMap((x) => {
    return setState({ myState: 'test' });
});

函数 setState 立即被调用，但它生成的观察者在有订阅者之前不会发送下一个。我想要的是该函数仅在有订阅者时调用。

查看源代码，您可以看到 RxJS returns 一个函数，该函数在执行时会创建一个可观察对象，但会立即调用该函数 - 回调参数。

Answer 1

fromCallback returns 一个函数，在执行时，returns 一个可观察对象。该可观察对象是函数调用的异步结果将流动的地方。

要延迟函数的执行，可以使用.defer。例如：

const setState = Rx.Observable.fromCallback(this.setState);
const deferred$ = Rx.Observable.defer(function (){return setState({ myState: 'Hi there!' }).concat(....)});
// Later on
deferred$.subscribe(...)

有人问了使用相同技巧回答的问题 and

RxJS 和 React 的 setState - 延迟函数执行直到订阅

RxJS and React's setState - delay function execution until subscription

javascript

rxjs

reactjs