無法在ngrx/store中使用select

Question

我正在使用ngrx/store像下面那樣測試狀態管理功能。非常奇怪的是我不能在user.selectors.ts中使用select方法。它表示Property'select'在類型'Observable'上不存在。 AppState在reducer.ts中正確定義。爲了使用'select'，在user.selectors.ts中添加了'@ ngrx/core/add/operator/select'，並且我確認了位於node_modules文件夾中的select.ts文件。

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

能否請你幫我這個？

我建立的方式如下。

app - auth 
    - core - store 
       - service 
    - shared 

裏面存放的目錄，5個文件是居民，user.actions.ts，user.reducer.ts，user.selectors.ts，APP-store.ts和index.ts。

我試圖從存儲目錄中創建一個模塊，如下所示。

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

僅供參考，APP-store.ts看起來像下面。

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

export interface AppState { 
    user: User; 
}; 

Answer 1

看到你的語法，它看起來像你使用的是舊的ngrx（版本2）。較新的版本（版本4）稍有不同。我將在這裏給出舊版本的語法，因爲您已經在使用它。

你的動作代碼是正確的，只是刪除@Injectable我們不是在任何地方注射它。還原劑似乎也很好。

如果你想在你的用戶的服務訪問代碼需要這樣：

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

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

這是不是最好的方式，但如果你得到的東西的工作，你可以進一步改進。

在你的組件，你可以說

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