NGRX应用程序中使用NGRX最新版本总是不确定的存储对象

Question

我有一个简单的应用程序

没有NGRX

组件

@Component({ 
    selector: 'app-competition', 
    templateUrl: './component.html', 
    styleUrls: ['./component.css'] 
}) 
export class Component implements OnInit { 

constructor(private Service:Service){} 

    comp:any[]; 

    ngOnInit(){this.Service.get().subscribe(comp => this.comp)} 

服务

@Injectable() 

export class CompetitionService{ 


    constructor(private http:Http, private af: AngularFireDatabase){ 

    } 

    getComp(){ 
    let headers = new Headers(); 
    headers.append('X-Auth-Token', 'XXXXX'); 
    return this.http.get('URL',{headers:headers}).map(response => response.json()) 
    } 

所有这些工程很好，当我尝试将其转换为ngrx它dosent工作使用存储和效果。

USING NGRX

创建的状态下部件

export interface AppState{ 
    comp:any; 
} 

ngOnInit(){ 
     this.store.dispatch({type:GET_COMP,payload: {}}); 
} 

ACTIONS

export const GET_COMP = 'GET_COMP'; 
export const SUCCESS = 'SUCCESS'; 

export class GetAction implements Action { 
    readonly type = GET_COMP; 

    constructor(public payload: any) {} 
} 

export class SuccessAction implements Action { 
    readonly type = SUCCESS; 

    constructor(public payload: any) {} 
} 

export type Actions = 
    | GetAction 
    | SuccessAction 
; 

影响

@Injectable() 
export class MainEffects { 

    constructor(private action$: Actions, private service$ :CompetitionService) { } 

    @Effect() load$:Observable<Action> = this.action$ 
     // Listen for the 'LOGIN' action 
     .ofType(GET_COMP) 
     .switchMap(action => this.service$.getComp() 
     // If successful, dispatch success action with result 
     .map(res => ({ type: SUCCESS, payload: res})) 
     // If request fails, dispatch failed action 
     .catch((err) => Observable.of({ type: 'FAILED' ,payload :err})) 
    ); 
} 

减速器

export function MainReducer(state = [],action: GetAction) { 
    switch (action.type) { 
    case GET_COMP: 
      return [action.payload]; 
     default: 
      return state; 
    } 
} 

APP.MODULE

StoreModule.forRoot({MainReducer}), 
EffectsModule.forRoot([MainEffects]) 

它进入到服务呼叫我做了记录，但同时获得它的分量，我得到以下

对不起，很长的帖子只是想告诉你。

我跟着这个视频https://www.youtube.com/watch?v=lQi5cDA0Kj8 也是这个https://github.com/ngrx/platform/blob/48a2381c212d5dd3fa2b9435776c1aaa60734235/example-app/app/books/reducers/books.ts

Answer 1

我按我的经验，建立了一个伪代码，你的代码看起来应该像下面。

• GetAction应该没有有效载荷。正如你所说的，它只是激发不需要任何输入的Web服务。
• 您应该在state中添加error以跟踪错误。
• 您应该使用selectors来获得状态值
• 您应该订阅store然后分配值。

STATE

export interface FeatureState { 
    comp: any; 
    error: any; 
} 

export interface AppState { 
    feature: FeatureState 
} 

ACTIONS

export const GET_COMP = 'GET_COMP'; 
export const SUCCESS = 'SUCCESS'; 
export const FAILED = 'FAILED'; 


export class GetAction implements Action { 
    readonly type = GET_COMP; 
} 

export class SuccessAction implements Action { 
    readonly type = SUCCESS; 

    constructor(public payload: any) {} 
} 

export class FailedAction implements Action { 
    readonly type = FAILED; 

    constructor(public payload: any) {} 
} 

export type Actions = 
    | GetAction 
    | SuccessAction 
; 

减速器

export function MainReducer(state = [],action: GetAction) { 
    switch (action.type) { 
    case SUCCESS: 
      return { 
       ...state, 
       comp: action.payload 
      }; 
    case FAILED: 
      return { 
       ...state, 
       error: action.payload 
      }; 
     default: 
      return state; 

} 

个SELECTORS

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

export const selectFeature = (state: AppState) => state.feature; 
export const selectFeatureCount = createSelector(selectFeature, (state: FeatureState) => state.count); 

COMPONENT

@Component({ 
    selector: 'app-competition', 
    templateUrl: './component.html', 
    styleUrls: ['./component.css'] 
}) 
export class Component implements OnInit { 

constructor(private action: OurAction , private store: Store){} 

    comp:any[]; 

    ngOnInit(){ 
     this.store.dispatch(new OurAction.GetAction()); 
     this.store.select(selectFeature).subscribe(state => { 
      this.comp = state.comp; 
     }); 
    } 

App.module.ts

StoreModule.forRoot({ feature : MainReducer }), 
EffectsModule.forRoot([MainEffects])