angular - ngRx 4 中的选择器返回存储对象而不是存储中的值

Question

当我尝试检索数据时，我的选择器返回的是 store 对象而不是 store 中的值。

这是我的减速器注射。

imports: [
    BrowserModule,
    StoreRouterConnectingModule,
    AppRoutingModule,
    StoreModule.forRoot({ 'home': reducer, 'router': routerReducer }),
    StoreRouterConnectingModule,
    StoreDevtoolsModule.instrument({ maxAge: 50 }),
  ]

这是我的减速器和状态。

export interface State {
  version: number;
}

export const initialState: State = {
  version: 1
};

export function reducer(state= initialState, action: Action) {
  switch (action.type) {
    default:
      return state;
  }
}

这是我的选择器。

import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromRoot from './app.reducer';

export const getHomeData = createFeatureSelector<fromRoot.State>('home');

export const getVersionNumber = createSelector(
    getHomeData,
    (store) => store.version
);

我得到的输出是

这是我的控制台

Store {_isScalar: false, actionsObserver: ActionsSubject, reducerManager: ReducerManager, source: Store, operator: DistinctUntilChangedOperator}
actionsObserver
:
ActionsSubject
operator
:
DistinctUntilChangedOperator
reducerManager
:
ReducerManager
source
:
Store
_isScalar
:
false
__proto__
:
Observable

这就是我访问我的选择器的方式。

export class AppComponent {
  constructor(public store: Store<State>) {
    console.log(this.store.select(getVersionNumber));
  }
}

提前致谢。

Answer 1

尝试通过组件订阅 observable

export class AppComponent {
  public getVersionNumber$: Observable<number>;
  constructor(public store: Store<State>) {
    getVersionNumber$ = this.store.select(getVersionNumber)
                        .pipe(
                          tap(versionNumber => console.log(versionNumber))
                         )
                         .subscribe();
  }
}

这不是 100% 干净的，因为您必须处理取消订阅。如果您能在寺庙中找到一个挂钩订阅的地方会更好，例如：

 // component
    export class AppComponent {
      public getVersionNumber$: Observable<number>;
      constructor(public store: Store<State>) {
        getVersionNumber$ = this.store.select(getVersionNumber)
                            .pipe(
                              tap(versionNumber => console.log(versionNumber))
                             );
      }
    }

// somewhere in template
<ng-container *ngIf="(getVersionNumber$ | async) as getVersionNumber">
{{getVersionNumber}}
</ng-container>

异步管道将自动处理订阅