ngrx / store 4：從商店中選擇時獲得意外的子狀態

Question

我有幾個子商店。 可以說Sub1和Sub2具有以下狀態和簡化器（對於我的問題，操作並不有趣……我想）：

Sub1的：

export interface Sub1State {
  sub1value: string
}

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

分公司2：

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
};

並將其“注冊”到商店：

StoreModule.forRoot(reducers)

現在，在Angular組件中，我想選擇Sub1存儲並獲取sub1value字符串。 所以我做...

sub1value$: Observable<string>;

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

在log語句中，我希望獲得以下對象（Sub1State對象）：

{
  sub1value: 'initial value'
}

但是我真正得到的是這個對象：

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

這按預期工作嗎？ 如果是，我該如何使用Sub1State接口？ 因為sub1不是接口的一部分。

同樣令人好奇的是，調用state.sub1value時我沒有收到任何錯誤（編譯器錯誤和運行時錯誤）， state.sub1value顯然是錯誤的，因為它必須是state.sub1.sub1value 。 我了解沒有運行時錯誤，它只是未定義。 但是我認為TypeScript編譯器應該在這里拋出錯誤。

我真的很困惑：/

編輯

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

Answer 1

當您獲得應用程序的狀態時，它將返回一個對象。 您的州有兩個子州，分別稱為sub1和sub2。 每個對象都是其自己的對象。 因此它按預期工作。 您需要執行“ return state.sub1.sub1value;

或我通常要做的是，通過執行這樣的操作來訂閱特定的reducer，然后我只返回特定的子狀態，而不是整個狀態：

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