Question

我正在尝试使用类似Redux的模式来维护特定功能的服务状态。我的意图是，消费者可以通过调用getItem1()或getItem2()来订阅单独的数据流，然后根据需要在服务上调用initializeItem1()或initializeItem2()等操作方法调度将改变商店状态的操作。在服务中，可以从http调用或其他内容获得数据，如在提供的plnkr中模拟的那样。

https://plnkr.co/edit/f3HLp5C8ckIpjNsM8dTm?p=preview

具体来说，我不明白为什么在我的示例代码中，getItem1()返回的observable不会发出值，除非我将this.service.initializeItem1().subscribe();更改为this.service.initializeItem1().subscribe(() => {});。有人可以解释一下，如果这似乎是rxjs中的一个错误，如果有一个好的/已知的解释为什么这样做，或者我只是缺少一些东西？我感谢社区可以为我提供的任何见解。感谢。

组件

//our root app component
import {Component, OnInit} from '@angular/core'
import {Observable} from 'rxjs/Rx'
import {SampleService} from './sample.service'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Item 1 Value</h2>
      <div>{{ item1 }}</div>

      <h2>Item 2 Value</h2>
      <div>{{ item2 }}</div>
    </div>
  `,
})
export class App implements OnInit {
  name:string;
  item1: string;
  item2: string;
  constructor(private service: SampleService) { }

  ngOnInit() {
    this.item1 = this.service.getItem1().subscribe(item1 => this.item1 = item1);
    this.item2 = this.service.getItem2().subscribe(item2 => this.item2 = item2);

    /* broken */
    //Item 1 does not display
    //Item 2 displays as expected
    this.scenario1();

    /* works */
    //Item 1 displays as expected
    //Item 2 displays as expected
    // this.scenario2();
  }

  private scenario1() {
    this.service.initializeItem1().subscribe();
    this.service.initializeItem2().subscribe();
  }

  private scenario2() {
    this.service.initializeItem1().subscribe(() => {});
    this.service.initializeItem2().subscribe();
  }
}

服务

import {Injectable} from '@angular/core'
import {Observable, Subject} from 'rxjs/Rx'
import { Http, Headers } from '@angular/http';

@Injectable()
export class SampleService {
  constructor(private http: Http) { }
  private headers: Headers = new Headers({ 'Content-Type': 'application/json' });
  private _store: Subject<any> = new Subject<any>();
  private store = this._store.asObservable()
      .startWith({})
      .scan(reducer);

  public initializeItem1(): Observable<string> {
    return this.http.get('api/foobar')
      .map(response => response.json().item).do(data => {
        console.log('not hit in scenario 1, but hit in scenario 2:', data);

        this._store.next({
          type: 'INITIALIZE_1',
          payload: data
        });
      });
  }

  public initializeItem2(): Observable<string> {
    return Observable.of('foobar-2').do(data => {
      console.log('hit in scenario 1 and scenario 2:', data);

      this._store.next({
        type: 'INITIALIZE_2',
        payload: data
      });
    });
  }

  getItem1(): Observable<string> {
        return this.store.map(store => store.settings1);
    }

  getItem2(): Observable<string> {
      return this.store.map(store => store.settings2);
  }
}

function reducer(store, action) {
    switch(action.type) {
        case 'INITIALIZE_1':
            return Object.assign({ }, store, {
                initialSettings: action.payload,
                settings1: action.payload
            });
        case 'INITIALIZE_2':
            return Object.assign({ }, store, { settings2:action.payload });
        default:
            return store;
    }
}

Answer 1

这是RxJS 5中直到RxJS 5.2.0版本的错误。它已经修复但尚未发布。

唯一的解决方法是使用任何订阅者，例如() => {}（我认为只使用{}也可以。）

在RxJS上合并公关GitHub解决了这个问题：

https://github.com/ReactiveX/rxjs/pull/2238

当没有回调参数调用subscribe时，RXJS操作符不会在流中被命中

1 个答案: