避免 if 语句 NgRx Store

Avoid if statement 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
      };
  }

}

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

发生这种情况是因为您没有return初始状态以防未知操作[或默认]。在 default 操作的情况下,您应该 return 初始状态。像这样更改你的减速器:

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

}

希望对您有所帮助。