NGRX 4商店没有使用任何型号

时间:2017-07-23 18:29:52

标签: angular redux ngrx ngrx-store

我正在尝试使用没有像

这样的模型的ngrx存储状态
export interface AppStore{
    competitions:any[];
}

但是当它这样做时返回undefined我现在不知道如何使用动作有效载荷我觉得很累,请帮忙

this.store.select('competitions').subscribe(data=> console.log(data)).unsubscribe();

我总是未定义请帮忙

使用NGRX

在组件

中创建了一个STATE
export interface AppState{
    comp:any;
}

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

操作

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])

减速机工厂

export const reducers: ActionReducerMap<AppStore> = {
     competitions: MainReducer
};

0 个答案:

没有答案