ngrx/store 4：从商店中选择时出现意外的子状态

Question

我有几家分店。让我们说 Sub1 和 Sub2 具有以下状态和缩减器（动作对我的问题不感兴趣......我猜）：

Sub1:

export interface Sub1State {
  sub1value: string
}

export function sub1reducer(state: Sub1State, action: Action): Sub1State {
  ...
}

Sub2:

export interface Sub2State {
  sub2value: number
}

export function sub2reducer(state: Sub2State, action: Action): Sub2State {

}

然后我将这两个子状态合并为一个ActionReducerMap<ApplicationState>:

export interface ApplicationState {
  sub1: Sub1State,
  sub2: Sub2State
}

export const reducers: ActionReducerMap<ApplicationState> = {
  sub1: sub1reducer,
  sub2: sub2reducer
};

然后 'register' 到商店：

StoreModule.forRoot(reducers)

现在，在 Angular 组件中，我想 select Sub1 存储并获取 sub1value 字符串。所以我做...

sub1value$: Observable<string>;

constructor(private store: Store<Sub1State>) {
  this.sub1value$ = store.map(state => {
    console.log(state);
    return state.sub1value;
  });
}

在日志语句中，我希望得到以下对象（Sub1State 对象）：

{
  sub1value: 'initial value'
}

但我真正得到的是这个对象：

{
  sub1: {
    sub1value: 'initial value'
  }
}

这是否按预期工作？如果是，我应该如何使用 Sub1State 接口？因为 sub1 不是界面的一部分。

而且奇怪的是，我在调用 state.sub1value 时没有收到任何错误（既不是编译器错误也不是运行时错误），这显然是错误的，因为它必须是 state.sub1.sub1value。我明白没有运行时错误，它只是未定义。但是在我看来，TypeScript 编译器应该在这里抛出一个错误。

我真的很困惑:/

编辑

这是我期望它如何工作的示例：https://stackblitz.com/edit/angular-w34kua?file=app%2Fapp.component.ts

Answer 1

当您获取应用程序的状态时，它正在 returning 一个对象。您的状态中有两个子状态，它们称为 sub1 和 sub2。每一个都是它自己的对象。所以它按预期工作。你需要做 'return state.sub1.sub1value;

或者我通常做的是，我通过做这样的事情来订阅一个特定的减速器，然后我只得到那个特定的子状态而不是整个状态：

constructor(private store: Store<Sub1State>) {
  store.select('sub1').subscribe((state : Sub1State) => {
    console.log(state);
    this.sub1value$ = state.sub1value;
  });
}

ngrx/store 4：从商店中选择时出现意外的子状态

ngrx/store 4: get unexpected sub state when selecting from store

angular

ngrx-store-4.0