如何从 RxJS 可观察对象中检索最新状态？

Question

在这个ngrx example 中，searchQuery$ 是一个 RxJS Observable。我知道当 UI 上的搜索查询字符串发生变化时，Observable 会发出变化。

我已经向这个控件引入了另一个名为paging$ 的Observable 来进行分页。这个Observable 发出页码。当页面发生变化时，我必须调用另一个服务器来检索剩余的书籍。

当我在用户单击页面时调用服务器时，我有页码，因为它直接来自 UI，而不是 searchQuery$ Observable 已经发出的搜索字符串。

如何结合 searchQuery$ 和 paging$ 使用 RxJS 检索搜索字符串和页码？

更新：

事件：

1. 用户在搜索框中输入an。
2. 显示前 10 本书。
3. 用户现在单击 NEXT 分页按钮。
4. 应该显示接下来的 10 本书（在带有最后一个搜索字符串 an 的 http 请求之后）。

ngrx 示例中的代码：

import 'rxjs/add/operator/let';
import 'rxjs/add/operator/take';
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';

import * as fromRoot from '../reducers';
import * as book from '../actions/book';
import { Book } from '../models/book';

@Component({
  selector: 'bc-find-book-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '
    <bc-book-search [query]="searchQuery$ | async" [searching]="loading$ | async" (search)="search($event)"></bc-book-search>
    <bc-book-preview-list [books]="books$ | async"></bc-book-preview-list>
  '
})
export class FindBookPageComponent {
  searchQuery$: Observable<string>;
  books$: Observable<Book[]>;
  loading$: Observable<boolean>;

  constructor(private store: Store<fromRoot.State>) {
    this.searchQuery$ = store.select(fromRoot.getSearchQuery).take(1);
    this.books$ = store.select(fromRoot.getSearchResults);
    this.loading$ = store.select(fromRoot.getSearchLoading);
  }

  search(query: string) {
    this.store.dispatch(new book.SearchAction(query));
  }
}

Answer 1

你可以使用combineLatest:

updateBooks$ = Observable.combineLatest(
    this.searchQuery$,
    this.paging$
).do(([searchQuery, paging]: [string, number]) => {
    ...makeServerRequest or dispatch an action here
});

updateBooks$
    // when subscribing in a component directly, don't forget to handle component-destructions: http://stackoverflow.com/questions/42490265/rxjs-takeuntil-angular2-components-ngondestroy
    .takeUntil(destroyed$)
    .subscribe();

*如果您的代码与 ngrx-example 相同，则必须从 searchQuery$ 上的 store-select 中删除 take(1)