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

【问题标题】：RxJS and React's setState - delay function execution until subscriptionRxJS 和 React 的 setState - 延迟函数执行直到订阅
【发布时间】：2016-01-19 00:51:10
【问题描述】：

RxJS 有一个漂亮的函数fromCallback，它接受一个函数，其最后一个参数是回调并返回一个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 返回一个函数，该函数在执行时会创建一个 observable，但会立即调用该函数 - 回调参数。

【问题讨论】：

嘿，这很有趣 - 你的用例是什么，或者为什么这样做？我想知道你想出这个的想法。谢谢！
我正在构建一个github.com/akiran/react-slick 的 React 端口，在每次幻灯片更改之前，我设置当前关注的幻灯片的状态。所以我需要确保在开始动画之前，已经设置了状态。因此，按照答案中的建议使用defer 和fromCallback，我执行Rx.Observable.defer(() => setState)) 之类的操作，它首先将函数设置为延迟，然后调用之前从fromCallback 创建的可观察函数
@jamesemanon 说得更笼统一些，任何时候你想设置状态，然后执行一个动作并确保它已经被设置，并且你还想使用 observables，这就是要走的路. React 文档谈到使用 setState 回调做同样的事情，这确实是一个可观察的版本。此外，由于fromCallback 的性质，返回的函数会立即执行，该值不会传播，直到有订阅者。在setState 的情况下，一旦调用它就会设置状态，无论是否有订阅者。
^ 这是我试图解决的真正问题。例如，看看这个：setState({ someState: 'hi' }).concat(Rx.Observable.just(42))。我，这段代码的读者会假设订阅开始时会调用setState，依此类推。但是，它是在可观察对象创建时调用的，而不是在订阅时调用的。因此，如果您创建一个 observable 并将其存储起来以备后用，则状态会被设置，而不是作为观察者链的一部分。
当然，很高兴为您提供帮助。一个警告，如果你打算使用这个方法将setState 或其他任何东西变成一个可观察的，以便你延迟函数执行直到订阅，在defer 确保你返回一个可观察的，即@987654341 @。使用 es6，它隐含在单行函数中，但我只是遇到了一个问题，即没有在延迟内返回。把我扔了一个循环。

标签： javascript reactjs rxjs

【解决方案1】：

fromCallback 返回一个函数，该函数在执行时返回一个 observable。该 observable 是函数调用的异步结果将流向的地方。

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

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

使用相同技术回答的问题被问到here 和here

【讨论】：

看起来 Rx.js 5.0 的 API 中不再包含 Observable.fromCallback。
在 Rx ^5 中有 Rx.Observable.bindCallback