Geek Answers Handbook

NGRX / Storage of erratic payload type

I have the following actions:

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;

With the next installation of the base gear

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

This works great if I introduce another action:

 export class SelectOHAction implements Action { type = ActionTypes.MODIFY_SELECTED_OH constructor(public payload: string) { } }

Note that the payload for this action only is a string, as soon as it was saved or tried to compile, now typescript indicates: "the filter does not exist on a string like | OrderHead []"

Now, if I enter my gearbox and add a new case:

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

I get typescript errors when matching action.payload:

Returns the string TS error ". OrderHead [] is not assigned to a string of type

Obviously, in both cases, the payload has a different data structure, do I need to change my code in any other way so that each case collects the correct type for action.payload?

Update

So, if in my actions I define the payload as "any" rather than "string", it seems to compile and work without problems, however this seems to be very hacked (and not the expected behavior)

 export class SelectOHAction implements Action { type = ActionTypes.MODIFY_SELECTED_OH constructor(public payload: any) { } }
+5
angular typescript ngrx
source share
1 answer

This is a problem with Typescript> 2.1 and the type of use is ngrx.

With Typescript 2.1 and above, now you can simply define actions as

 export const CREATE_OH: '[ORDERHEAD] Create Orderhead'; export class CreateOHAction implements Action { type = CREATE_OH constructor(public payload: OrderHead[]) { } }

Now wherever you used item.ActionTypes.CREATE_OH , replace it with item.CREATE_OH . Types will flow as expected with Typescript 2.1

0
source share

More articles:


All Articles