Kann nicht in ngrx verwenden/speichern

Question

Ich teste staatliche Funktionen mit ngrx/speichern wie unten. Das Seltsame ist, dass ich die Methode select nicht in user.selectors.ts verwenden kann. Es besagt, dass die Eigenschaft 'select' beim Typ 'Observable' nicht existiert. AppState ist in der reducers.ts richtig definiert. Um 'select' zu verwenden, wird 'user.selectors.ts' importiert, um '@ ngrx/core/add/operator/select' hinzuzufügen. Außerdem habe ich bestätigt, dass die Datei 'select.ts' im Ordner 'node_modules' richtig liegt.

user.actions.ts

import { Injectable } from '@angular/core'; 
import { Action } from '@ngrx/store'; 

@Injectable() 
export class UserActions { 

    static LOGIN = 'LOGIN'; 
    static LOGOUT = 'LOGOUT'; 

    logIn (token: string) { 
    return { type: UserActions.LOGIN, token }; 
    } 

    logOut() : Action { 
    return { type: UserActions.LOGOUT }; 
    } 
} 

user.reducers.ts

import '@ngrx/core/add/operator/select'; 
import { Observable } from 'rxjs/Observable'; 
import { Action } from '@ngrx/store'; 
import { UserActions } from './user.actions'; 

export * from './user.actions'; 

export interface User { 
    access_token: string; 
    is_authenticated: boolean; 
}; 

const initialUserState: User = { 
    access_token: '', 
    is_authenticated: false 
}; 

export function userReducer(state = initialUserState, action: Action): User { 
    switch (action.type) { 
    case UserActions.LOGIN: 
     return Object.assign({}, state, { access_token: action.payload }) 
    case UserActions.LOGOUT: 
     return Object.assign({}, state, { access_token:'' }) 

    default: 
    return state; 
    } 
}; 

user.selectors.ts

import { Observable } from 'rxjs/Observable'; 
import { UserProfile } from './user.reducers'; 
import { AppState } from '../reducers'; 
import '@ngrx/core/add/operator/select'; 

export function getUser$(state$: Observable<AppState>): Observable<User> { 
    return state$.select(state => state.user.access_token); 
} 

Können Sie mir bitte helfen Sie damit aus?

Die Art, wie ich unten baue.

app - auth 
    - core - store 
       - service 
    - shared 

Innenspeicherverzeichnis, 5 Dateien ansässig sind, user.actions.ts, user.reducer.ts, user.selectors.ts, app-store.ts und index.ts.

Ich habe versucht, ein Modul aus dem Geschäftsverzeichnis wie folgt zu machen.

index.ts

import { Observable } from 'rxjs/Observable'; 
import { NgModule } from '@angular/core'; 
import { StoreModule, combineReducers } from '@ngrx/store'; 
import { compose } from '@ngrx/core'; 
import { StoreDevtoolsModule } from '@ngrx/store-devtools'; 
import 'rxjs/add/operator/let'; 
import '@ngrx/core/add/operator/select'; 
import { UserActions } from './user-profile.actions'; 
import { userReducer } from './user-profile.reducer'; 
import { AppState } from './app-store'; 

@NgModule({ 
    imports: [ 
    StoreModule.provideStore({userReducer}), 
    ], 
    declarations: [], 
    exports: [], 
    providers: [UserActions] 
}) 
export class CoreStoreModule {}; 

FYI, app-store.ts unten aussieht wie.

import { User } from './user.reducer'; 

export interface AppState { 
    user: User; 
}; 

Answer 1

Wenn Sie Ihre Syntax sehen, sieht es so aus, als ob Sie älteres ngrx (Version 2) verwenden. Die neuere (Version 4) ist etwas anders. Ich werde hier die Syntax für die ältere Version angeben, da Sie sie bereits verwenden.

Ihr Aktionscode ist korrekt, entfernen Sie einfach @Injectable wir injizieren es nirgends. Reducer scheint auch in Ordnung zu sein.

Wenn Sie den Code in Ihrem Benutzerdienst zugreifen möchte muss so sein:

import { Store } from '@ngrx/store';  

@Injectable() 
public class UserService{ 
    constructor(private store: Store<any>){} 
    public getUser(): Observable<User>{ 
     return this.store.select('userReducer'); 
    } 
} 

Dies ist nicht der beste Weg, aber wenn man etwas zum Laufen bringen, können Sie es weiter verbessern.

In Ihrer Komponente kann man sagen,

constructor(private userService: UserService){ 
    this.userService.getUser().subscribe((user: User)=> console.log(user)); 
}