NGRX/存储有效载荷类型混乱 [英] NGRX/Store payload type confusion

问题描述

我有以下动作:

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 following base reducer setup

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 fine, however, if I introduce another action:

export class SelectOHAction implements Action {
  type = ActionTypes.MODIFY_SELECTED_OH 

  constructor(public payload: string) { }
}

注意，仅用于此操作的有效负载 是字符串，一旦保存或尝试编译，则打字稿立即声明:过滤器不存在于string | OrderHead类型上]"

Notice, the payload for this action only is string, as soon as this saved, or tried to compile, typescript now states: "filter does not exisit on type string|OrderHead[]"

现在，如果我进入我的减速器，并添加一个新案例:

Now if I go into my reducer, and add a new case:

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

映射action.payload of时出现打字稿错误:

I get the typescript errors when mapping action.payload of:

引发TS错误无法将string | OrderHead []分配为字符串类型"

很明显，在两种情况下，有效负载都具有不同的数据结构，我是否需要以其他方式更改代码以确保每种情况都为action.payload选择正确的类型?

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

更新

因此，如果在我的操作中将有效负载定义为"any"而不是"string"，则它似乎可以编译并且可以正常工作，但是，这似乎非常错误(而不是预期的行为)

So if in my actions I define the payload as "any" instead of "string" it seems to compile and work without issue, however this seems very hacky (and not the expected behaviour)

export class SelectOHAction implements Action {
  type = ActionTypes.MODIFY_SELECTED_OH 

  constructor(public payload: any) { }
}

推荐答案

这是Typescript> 2.1和ngrx的类型util的问题.

This is an issue with Typescript >2.1 and the type util of ngrx.

现在使用打字稿2.1及更高版本，您可以简单地将动作定义为

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[]) { }
}

现在您在所有使用item.ActionTypes.CREATE_OH的地方，都将其替换为item.CREATE_OH.这些类型将按照打字稿2.1的预期进行流动

Now everywhere you used item.ActionTypes.CREATE_OH, replace it with item.CREATE_OH. The types will flow as expected with typescript 2.1

这篇关于NGRX/存储有效载荷类型混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！