Redux Observable / RxJS：如何创建自定义observable？

Question

我试图在一个redux-observable史诗中做websocket设置，我采用类似于这个人的方法：https://github.com/MichalZalecki/connect-rxjs-to-react/issues/1

然而，看起来我第一次尝试接线并不起作用，即使它看起来和上面那个人一样：

import 'rxjs';
import Observable from 'rxjs';

import * as scheduleActions from '../ducks/schedule';

export default function connectSocket(action$, store) {
  return action$.ofType(scheduleActions.CANCEL_RSVP)
    .map(action => {
      new Observable(observer => {
        // do websocket stuff here
        observer.next('message text');
      });
    })
    .map(text => {
      console.log("xxxxxxxxxxxxx: ", text);
      return scheduleActions.rsvpCancelled(1);
    });
};

但是，我收到Object is not a constructor错误：

=== UPDATE ===

看起来构建{Observable}导出的建议工作了！

并非唯一的问题是text似乎没有跨越到下一个方法......

import 'rxjs';
import { Observable } from 'rxjs';

import * as scheduleActions from '../ducks/schedule';

export default function connectSocket(action$, store) {
  return action$.ofType(scheduleActions.CANCEL_RSVP)
    .map(action => {
      new Observable(observer => {
        // do websocket stuff here
        observer.next('message text');
      });
    })
    .map(text => {
      console.log("xxxxxxxxxxxxx: ", text); // prints undefined
      return scheduleActions.rsvpCancelled(1);
    });
};

Answer 1

在RxJS v5中，Observable类可用作命名导出，而不是默认导出。

import { Observable } from 'rxjs';

从常规rxjs导入也会导入所有的RxJS（将所有运算符添加到Observable原型中）。这被描述为in the docs here。如果您希望更明确并且只导入Observable本身，则可以直接在rxjs/Observable导入：

import { Observable } from 'rxjs/Observable';

另外，您对自定义Observable的映射方式存在一些问题。

第一期

你实际上并没有归还它。呵呵。你错过了一个return语句（或者你可以删除花括号并使用箭头函数隐式返回）。

第二期

当您返回Observable时，常规.map()运算符不会执行任何特殊操作。如果您想要订阅并展平自定义Observable，您将需要使用某种类似扁平化的运算符。

最常见的两个是mergeMap（又名flatMap）或switchMap。

action$.ofType(scheduleActions.CANCEL_RSVP)
  .mergeMap(action => {
    return new Observable(observer => {
      // do websocket stuff here
      observer.next('message text');
    });
  })

您需要哪个运算符取决于您所需的行为。如果您还不熟悉，可以查看documentation on the various operators或直接跳转到mergeMap和switchMap文档。

如果您喜欢冒险，RxJS v5确实有开箱即用的WebSocket支持，您可以尝试使用Observable.webSocket()。它没有很好地记录，但你也可以看一下单元测试，对于简单的只读单向流，它是非常自我解释的 - 提供URL和订阅。它实际上是令人难以置信的强大，如果你能弄明白如何使用它，那就是。通过单个插槽支持双向，多路复用，即复杂的多输入/输出通道。我们在Netflix上使用它来获得数千个rps的几个内部工具。

Answer 2

您可以看一下演示。访问Create Custom Observable