Невозможно использовать выбор в ngrx / store

Я тестирую функции управления состоянием с помощью ngrx / store, как показано ниже. Очень странно то, что я не могу использовать метод select в user.selectors.ts. В нем говорится, что свойство select не существует для типа Observable. AppState правильно определен в reducers.ts. Чтобы использовать 'select', import '@ ngrx / core / add / operator / select' добавляется в user.selectors.ts, также я подтвердил, что есть файл select.ts в правильно расположенном в папке node_modules файле.

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

angular ngrx ngrx-store
person Anna Lee    schedule 21.08.2017    source источник
comment
Покажите свой код модуля, который является наиболее важным, и действие не должно быть инъекционным, не знаете, как вы его используете   -  person Vamshi    schedule 22.08.2017
comment
Я добавил код для определения модуля, помогите мне.   -  person Anna Lee    schedule 22.08.2017

Ответы (1)


arrow_upward
2
arrow_downward

Судя по вашему синтаксису, похоже, что вы используете более старую версию 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));
}
person Vamshi    schedule 23.08.2017
comment
Здравствуйте, похоже, у меня похожая проблема, и я обнаружил ее после того, как задал новый вопрос. Что в его примере происходит с user.selectors.ts? В моем примере у нас были эти методы в наших классах редуктора, и я немного потерял, что нужно перемещать, куда. stackoverflow.com/questions/45945602/ - person Carl; 30.08.2017
comment
Постараюсь вам помочь - person Vamshi; 31.08.2017