Store.select Fehler?

Question

Store.select sollte eine Zeichenfolge erhalten, die ihm sagt, welche Eigenschaft des Geschäfts ich beobachten möchte, aber das Problem ist, dass er diese Eigenschaften nicht hat. Insead er hat die Reducer-Funktion als eine Eigenschaft, die die Zustandseigenschaften freilegt.

Durch https://github.com/ngrx/store ist es leicht zu bemerken, dass etwas nicht stimmt.

Thier Code:

counter: Observable<number>; 
constructor(public store: Store<AppState>){ 
    this.counter = store.select('counter'); 
} 

Mein Code:

export interface AppState{ 
    connectedAccountId:number; 
} 
@Injectable() 
export class ConnectedAccountService { 
    public connectedAccountId$:Observable<number>; 
    constructor(private _store:Store<AppState>,private _accountService:AccountService) 
    { 
    this.connectedAccountId$ = this._store 
     .select(state=> 
     { 
     console.log(state); 
     let id:number=state.connectedAccountId; //x=undefined because state doesn't have 'connectedAccountId' property. 
     return state.connectedAccountReducer.connectedAccountId; //this line is working! 
     // Error:(35, 22) TS2339: Property 'connectedAccountReducer' 
     // does not exist on type 'AppState'. 
     }); 

    this.connectedAccountId$ = this._store.select("connectedAccountId"); 
    // Error:(37, 5) TS2322: Type 'Observable<{}>' is not 
    // assignable to type 'Observable<number>'. 
    // Type '{}' is not assignable to type 'number'. 
    } 

der folgende Code funktioniert und tun, was es mit einem großen Fehler tun muss:

this.connectedAccountId$ = this._store 
     .select(state=> 
     { 
     return state.connectedAccountReducer.connectedAccountId; //this line is working! 
     // Error:(35, 22) TS2339: Property 'connectedAccountReducer' 
     // does not exist on type 'AppState'. 
     }); 

Warum Typoskript diese Fehler werfen? Wie kann ich es reparieren?

Answer 1

Mein Bootstrap:

bootstrap(AppComponent, [ 
    AccountService,ConnectedAccountService, 
    provideStore({connectedAccountReducer}) 
]); 

geändert:

bootstrap(AppComponent, [ 
     AccountService,ConnectedAccountService, 
     provideStore(connectedAccountReducer) //{} removed. 
    ]); 

Incase Sie {} im Laden, nutzen Sie @Max Lösung, die funktioniert gut: state['reducer function name'].state property