"Property 'action' does not exist on type..." createReducer() NgRx 函数出错

Question

我正在重构我的 NgRx reducer 以使用 createReducer() 函数而不是传统的 switch 语句，但我收到以下错误：

ERROR in src/app/store/price.reducer.ts(17,32): error TS2339: Property 'action' does not exist on type 'IUser & TypedAction<"[Websocket Service] Get User"> & { type: "[Websocket Service] Get User"; }'.
    src/app/store/price.reducer.ts(18,34): error TS2339: Property 'action' does not exist on type 'IPrice & TypedAction<"[Websocket Service] New Prices"> & { type: "[Websocket Service] New Prices"; }'.

这是我的 createReducer() 函数和导出的减速器本身：

const userPriceReducer = createReducer(
  defaultState,
  on(actions.getUser, (state, {action}) => ({ ...state, user: { firstName: <string>action.firstName, lastName: <string>action.lastName, age: <number>action.age } })),
  on(actions.newPrices, (state, {action}) => ({ ...state, prices: { ...state.prices, ...{[action.product_id]: <number>action.price } } }))
)

export function reducer(state: State | undefined, action: Action) {
  return userPriceReducer(state, action);
}

这是我的操作：

export const NEW_PRICES = '[Websocket Service] New Prices';
export const GET_USER = '[Websocket Service] Get User';

export const newPrices = createAction(
  NEW_PRICES,
  props<IPrice>()
);

export const getUser = createAction(
  GET_USER,
  props<IUser>()
);

IPrice和IUser是描述动作数据形状的接口。

我读过的关于这个的文档说 createReducer() 函数中 state 之后的花括号内的第二个参数（我把 {action} 放在那里）是应该是动作的有效负载，但是由于我在我的动作中使用 createAction()，因此动作中没有实际的 payload 属性和动作本身携带数据。使用 switch 语句方法时，访问和保存这些数据没有问题。我在这里做错了什么？

Answer 1

你的动作没有动作属性，应该是

const userPriceReducer = createReducer(
  defaultState,
  on(actions.getUser, (state, action) => ({ ...state, user: { firstName: <string>action.firstName, lastName: <string>action.lastName, age: <number>action.age } })),
  on(actions.newPrices, (state, action) => ({ ...state, prices: { ...state.prices, ...{[action.product_id]: <number>action.price } } }))
)

或：

const userPriceReducer = createReducer(
  defaultState,
  on(actions.getUser, (state, {firstName,lastName,age}) => ({ ...state, user: { firstName: <string>firstName, lastName: <string>lastName, age: <number>age } })),
  on(actions.newPrices, (state, {price}) => ({ ...state, prices: { ...state.prices, ...{[action.product_id]: <number>price } } }))
)

"Property 'action' does not exist on type..." createReducer() NgRx 函数出错

"Property 'action' does not exist on type..." error in createReducer() NgRx function

typescript

ngrx

angular

ngrx-reducers