RxJS可觀察的合並角度

Question

我有一個訂閱消息流的沙箱，我想過濾該流以查找使用另一個組件中指定的路由參數發送給特定用戶或從特定用戶接收的消息。

messages.sandbox.ts：

messages$: Observable<Array<Message>> = this.store.select(state => state.data.messages);    

fetchReceived(id: string): Observable<Array<Message>> {
    return this.messages$.map((messages: any) => {
        return messages.filter((message: Message) => {
            return message.recipientId == id;
        });

    });
}

fetchSent(id: string): Observable<Array<Message>> {
    return this.messages$.map((messages: any) => {
        return messages.filter((message: Message) => {
            return message.userId == id;
        })
    })
}

messages.detail.container.ts

sentMessages$ = new Observable<Array<Message>>();
receivedMessages$ = new Observable<Array<Message>>();
matchingMessages$ = new Observable<Array<Message>>();



ngOnInit() {

    this.route.params.subscribe((params: Params) => {
        this.sentMessages$ = this.sb.fetchReceived(params['id']);
        this.receivedMessages$ = this.sb.fetchSent(params['id']);

        this.matchingMessages$ = Observable.merge(this.sentMessages$, this.receivedMessages$);

    });
}

this.matchingMessages $似乎只包含this.receivedMessages $，但是我知道this.sentMessages $不為null，因為我可以在模板中使用它而不會出現問題。

我是否在合並Observables中缺少某些東西？ 創建一個單獨的fetchMessages方法以過濾等於路由參數ID的userId或receiveId會更好嗎？ 如果是這樣，我將如何處理？

謝謝！！

Answer 1

您有正確的總體思路。 僅有一些缺陷。

1. 切勿使用new Observable<T>() 。 它不執行您認為的操作。 它幾乎沒有任何用處。 始終根據工廠方法或其他可觀察物構造可觀察物
2. 您需要使用運算符將​​可觀察的參數轉換為新的可觀察參數。 您的問題是您訂閱了可觀察的參數，然后每次都構造新的可觀察對象。 但是其他代碼將已經訂閱了初始可觀察對象，因此它們將永遠不會看到更改。

所以你想做這樣的事情：

sentMessages$ : Observable<Array<Message>>;
receivedMessages$ : Observable<Array<Message>>;
matchingMessages$ : Observable<Array<Message>>;

ngOnInit() {
    const params$ = this.route.params;

    // use switchMap to map the new params to a new sent observable
    // each time params change, unsubscribe from the old fetch and subscribe
    // to the new fetch.  Anyone subscribed to "sentMessages" will see the
    // change transparently
    this.sentMessages$ = params$.switchMap((params: Params) => this.sb.fetchReceived(params['id']));
    // same for received
    this.receivedMessages$ = params$.switchMap((params: Params) => this.sb.fetchSent(params['id'])));

    // merge the 2 streams together
    this.matchingMessages$ = Observable.merge(this.sentMessages$, this.receivedMessages$);
}

編輯：

回答您的另一個問題：創建與發送者和接收者匹配的單個可觀察對象是否更好：取決於您的用例。 但是，這是您可以執行的操作：

messages.sandbox.ts：

fetchEither(id: string): Observable<Array<Message>> {
    return this.messages$.map((messages: any) => {
        return messages.filter((message: Message) => {
            return message.recipientId == id || message.userId === id;
        });

    });
}

容器：

matchingMessages$ : Observable<Array<Message>>;

ngOnInit() {
    const params$ = this.route.params;

    // use switchMap to map the new params to a new either observable
    // each time params change, unsubscribe from the old and subscribe
    // to the new fetch.  Anyone subscribed to "matchingMessages" will see the
    // change transparently
    this.matchingMessages$ = params$.switchMap((params: Params) => this.sb.fetchEither(params['id']));
}