Question

我正在使用ngrx / store测试状态管理功能，如下所示。非常奇怪的是我不能在user.selectors.ts中使用select方法。它表示'Observable'类型中不存在Property'select'。 AppState在reducers.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));
}

无法在ngrx / store中使用select

1 个答案: