angular - NGRX/Store förvirring kring payload-typ


Jag har följande åtgärder:

export const ActionTypes = {
  CREATE_OH:                  type('[ORDERHEAD] Create Orderhead'),
  MODIFY_SELECTED_OH:    type('[ORDERHEAD] Select Orderhead'),     
};

export class CreateOHAction implements Action {
  type = ActionTypes.CREATE_OH

  constructor(public payload: OrderHead[]) { }
}

export type Actions
  =   CreateOHAction
  |   SelectOHAction;

Med följande bas-reducerinställning

export interface State {
  orderids: string[];
  entities: { [orderID: string]: OrderHead };
  selectedOhID: string | null;
};

// Set initial state to empty
const initialState: State = {
  orderids : [],
  entities: {},
  selectedOhID: null,

};
export function OHreducer(state = initialState, action: orderhead_imp.Actions):  State{
      switch(action.type){

        case orderhead_imp.ActionTypes.CREATE_OH: 
            let orders = action.payload;
            let newOrders = orders.filter(orderhead => !state.entities[orderhead.orderID]);

            let newOrderIds = newOrders.map(orderhead => orderhead.orderID);
            let newOrderHeadEntities = newOrders.reduce((entities: { [orderID: string]: OrderHead }, orderhead: OrderHead) => {
              return Object.assign(entities, {
                [orderhead.orderID]: orderhead
              });
            }, {});

            return {
              orderids: [ ...state.orderids, ...newOrderIds ],
              entities: Object.assign({}, state.entities, newOrderHeadEntities),
              selectedOhID: state.selectedOhID
              };

        default:
            return state;

    };
}

Detta fungerar bra, men om jag introducerar en annan åtgärd:

export class SelectOHAction implements Action {
  type = ActionTypes.MODIFY_SELECTED_OH 

  constructor(public payload: string) { }
}

Observera, nyttolasten för denna åtgärd endast är en sträng, så snart detta sparas, eller försöker kompileras, anger TypeScript nu: "filter finns inte på typen string|OrderHead[]"

Nu, om jag går in i min reducer och lägger till ett nytt fall:

case orderhead_imp.ActionTypes.MODIFY_SELECTED_OH: {
 return {
  orderids:  state.orderids,
  entities: state.entities,
  selectedOhID: action.payload
};
}

Jag får TypeScript-felen när jag mappar action.payload av:

Ger TS-felet "string|OrderHead[] går inte att tilldela typen string"

Uppenbarligen har nyttolasten i båda fallen en annan datastruktur, behöver jag ändra min kod på något annat sätt för att säkerställa att varje fall plockar upp rätt typ för action.payload?

Uppdatering

Så om jag i mina åtgärder definierar nyttolasten som "any" istället för "string" verkar det kompilera och fungera utan problem, men det verkar mycket hackigt (och inte det förväntade beteendet)

export class SelectOHAction implements Action {
  type = ActionTypes.MODIFY_SELECTED_OH 

  constructor(public payload: any) { }
}

Svar #1

Detta är ett problem med Typescript >2.1 och typverktyget i ngrx.

Med TypeScript 2.1 och senare kan du nu helt enkelt definiera åtgärder som

export const CREATE_OH: '[ORDERHEAD] Create Orderhead';
export class CreateOHAction implements Action {
   type = CREATE_OH

   constructor(public payload: OrderHead[]) { }
}

Nu överallt där du använde item.ActionTypes.CREATE_OH, ersätt det med item.CREATE_OH. Typerna kommer att flöda som förväntat med typescript 2.1

Relaterade artiklar