避免使用 if 语句 NgRx Store答案

【问题标题】：Avoid if statement NgRx Store避免使用 if 语句 NgRx Store
【发布时间】：2019-08-23 17:40:41
【问题描述】：

我想在我在 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
      };
  }

}

campaign.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;

campaign.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;
        });
      }
    });
}

campaign.component.ts

【问题讨论】：

标签： angular ngrx ngrx-store

【解决方案1】：

发生这种情况是因为在未知操作 [或默认] 的情况下您没有返回初始状态。如果发生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;
  }

}

希望对你有帮助。

【讨论】：