角2 NGRX：誰がルータを初期化しますか？

Question

私はNGRX example appの例に従ってルータを構築しました。レイアウトルータは正確です。

AppComponent：

import * as fromRoot from '../../reducers'; 
import * as uiActions from '../../actions/ui-actions'; 

@Component({ 
    selector: 'app-root', 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    template: ` 
    <div #wrapper> 
    <div> 
     <app-header (toggleFullscreen$)="toggleFullscreen()"></app-header> 
    </div> 
    </div> 
` 
}) 
export class AppComponent { 
    @ViewChild('wrapper') wrapper: ElementRef; 
    isFullScreen$: Observable<boolean>; 

    constructor(private store: Store<fromRoot.State>){ 
    this.isFullScreen$ = this.store.select(fromRoot.getFullscreenMode); 
    } 

    isFullscreenAvailable(): boolean { ... 
    } 

    toggleFullscreen() { 
    if (!this.isFullScreen$.last){ 
     if (this.isFullscreenAvailable) { 
     this.store.dispatch(new uiActions.EnableFullscreen()); 
     } 
    } else { 
     this.store.dispatch(new uiActions.DisableFullscreen()); 
    } 
    } 

    ngOnInit(){ 
    this.isFullScreen$.subscribe((isFullscreen: boolean) => {...} 
    } 

UiReducer：ルータのディレクトリのindex.ts内部

import * as uiActions from "../actions/ui-actions"; 

export interface State { 
    fullscreen: boolean; 
} 

const INITIAL_UI_STATE: State = { 
    fullscreen: false 
}; 

export function reducer(state: State = INITIAL_UI_STATE, action: uiActions.Actions): State { 
    switch (action.type) { 
    case uiActions.ActionTypes.ENABLE_FULLSCREEN: { 
     return { 
     fullscreen:true 
     } 
    } 
    case uiActions.ActionTypes.DISABLE_FULLSCREEN: { 
     return { 
     fullscreen:false 
     } 
    } 
    default: { 
     console.log("default state: "+ JSON.stringify(state)); 
     return state; 
    } 
    } 
} 

export const getFullscreenMode = (state: State) => { 
    console.log("state from reducer method : " + state) 
    return state.fullscreen; 
} 

：

export const getUiState = (state: State) => state.uiState; 
export const getFullscreenMode = createSelector(getUiState, fromUi.getFullscreenMode); 

私はまだ、私はエラーを取得する新しいコードは次のようになりますアプリを起動し、私はそれらを追跡する方法を知らない。コンソールは言う：

ui-reducer.ts:24 default state: {"fullscreen":false} 
ui-reducer.ts:24 default state: {"fullscreen":false} 
ui-reducer.ts:31 state from reducer method : undefined 
TypeError: Cannot read property 'fullscreen' of undefined ... 
state from reducer method : undefined 
zone.js:569 Unhandled Promise rejection: Cannot read property 'fullscreen' of undefined 
Error: Uncaught (in promise): TypeError: Cannot read property 'fullscreen' of undefined 

私が言ったように、私はこれをデバッグする方法を見当もつかない。ストリームがまだ初期化されていないときに、ルータを元々呼び出すのは何ですか？バックグラウンドプロセスはありますか？彼らは初期化される前にストア変数にアクセスしようとしているようです。なぜこのコードは、サンプルアプリケーションでまったく同じに見えるとき私のために働かないのですか？

Answer 1

この問題に遭遇した他の誰にも、問題は、私は投稿のコードではありませんでしたが、セレクタが参照するためlayoutStateとlayoutReducerが同じ呼び出される必要があり、この場合

export interface State { 
    layoutState: fromLayout.State; 
} 

const reducers = { 
    layoutReducer: fromLayout.reducer, 
}; 

に異なる変数名を持ちますコンパイラーは状態を参照されたオブジェクトとして表示し、多くの混乱を招きます。