NgRX store.select返回存储对象而不是可观察对象

Question

我写了一个简短的Ngrx示例。我不知道为什么这段短代码无法正常运行。

constructor(private store: Store<CounterState>){
this.counter = store.select('counter');
console.log(this.counter);
}

这段代码将Store对象而不是可观察对象打印到控制台。真奇怪。 该应用程序的完整版请点击下面的链接。 https://stackblitz.com/edit/angular-dq7ssf

Answer 1

好吧，如果您看看Ngrx Store Source，Store 是一个Observable！

export class Store<T> extends Observable<T> implements Observer<Action> {
    ...
}

Answer 2

在您发布的示例中，您使用以下命令定义了根状态：

StoreModule.forRoot({  counterReducer })

意味着counterReducer是访问计数器状态的关键，要解决此问题，您可以按以下方式选择计数器

this.counter = store.select('counterReducer', 'counter');

或者您可以给减速器一个钥匙：

StoreModule.forRoot({  counter: counterReducer });
this.counter = store.select('counter', 'counter');

Answer 3

在帖子中，当您编写 store.select（'counter'）时，它将返回一个observable，并将其分配给属性“ counter”。现在，“ counter”属性也将成为可观察对象。要从可观察对象检索值，您需要订阅它。下面的代码将解决您的问题。

// Rxjs 5种方式

this.counter.subscribe(
(data:any) => {

console.log(data) //your data shows here
});

// Rxjs 6种方式，带有管道运算符

this.counter.pipe().subscribe(
(data:any) => {

console.log(data) //your data shows here
});

希望我的回答对您有所帮助。