Angular 2 NGRX: Wer initialisiert die Router?

Question

Ich baute einen Router nach dem Beispiel aus der NGRX example app, der Layout-Router, um genau zu sein. Der neue Code sieht wie folgt aus:

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:

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

innerhalb index.ts von Router-Verzeichnis:

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

noch bekomme ich Fehler, wenn ich Starten Sie die App und ich weiß nicht, wie ich sie zurückverfolgen kann. Die Konsole sagt:

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 

Wie gesagt, ich habe keine Ahnung, wie Sie dies debuggen. Was ruft der Router ursprünglich auf, wenn sein Stream noch nicht initialisiert ist? Gibt es einen Hintergrundprozess? Es scheint, dass es versucht, auf die Speichervariablen zuzugreifen, bevor sie initialisiert werden. Warum funktioniert dieser Code nicht, wenn er in der Beispielanwendung genauso aussieht?

Answer 1

Um jemand anderes dieses Problem zu begegnen, war das Problem nicht in dem Code, den ich geschrieben, aber mit unterschiedlichen Variablennamen in

export interface State { 
    layoutState: fromLayout.State; 
} 

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

in diesem Fall layoutState und layoutReducer müssen das gleiche genannt werden, weil die Wähler beziehen sich auf der Reduzierer, während der Compiler den Zustand als das Objekt zeigt, verursacht viel Verwirrung