时间戳

首页 > 解决方案 > 避免使用 if 语句 NgRx Store

angular - 避免使用 if 语句 NgRx Store

问题描述

我想在我在 Angular 中创建的组件中获取一个状态对象。但是，该值始终未正确加载且未定义。为什么会出错？如果我使用 if 语句，该方法工作正常，但我不明白为什么会出错。我怎样才能正确加载它？

const initialState: any = {
  id: 'campaignID1',
  name: 'Campagne 1'
};

export function reducer(state: Campaign = initialState, action: CampaignActions.Actions) {

  switch (action.type) {
    case CampaignActions.CHANGE_CAMPAIGN:
      return {
        id: action.payload.id,
        name: action.payload.name
      };
  }

}

活动.reducer.ts

export const CHANGE_CAMPAIGN = '[Campaign] Change';

export class ChangeCampaign implements Action {
  readonly type = CHANGE_CAMPAIGN;

  constructor(public payload: Campaign) {
  }
}

export type Actions = ChangeCampaign;

活动.action.ts

ngOnInit() {
    this.store.pipe(select('campaign')).subscribe(x => {
      if (x === undefined) { <------ THIS SHOULD BE UNNECESSARY
      } else {
        const params = new HttpParams()
          .set('campaignId', x.id);
        this.resourceService.list(params, '/campaign').subscribe(resources => {
          this.resources = resources;
        });
      }
    });
}

活动.component.ts

标签： angularngrxngrx-store

解决方案

发生这种情况是因为在未知操作 [或默认] 的情况下您没有返回初始状态。如果采取行动，您应该返回初始状态default。像这样改变你的减速器：

export function reducer(state: Campaign = initialState, action: CampaignActions.Actions) {

  switch (action.type) {
    case CampaignActions.CHANGE_CAMPAIGN:
      return {
        id: action.payload.id,
        name: action.payload.name
      };
    default:
      return state;
  }

}

希望能帮助到你。

推荐阅读