升级@ngrx/存储时,类型 'Action' 上不存在属性'payload'



我在我的 angular (4.x( 应用程序中有@ngrx/store包,并且正在从 v 2.2.2 -> v4.0.0升级。我可以看到迁移说明说:

有效负载属性已从操作界面中删除。

然而,他们给出的例子似乎完全违反直觉(在我看来......

我有一个减速器功能,看起来像这样:

export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: Action): ITitle {
switch (action.type) {
case 'SET_TITLE':
return {
company: action.payload.company,
site: action.payload.site,
department: action.payload.department,
line: action.payload.line
}
case 'RESET':
return {
company: 'MyCo',
site: 'London'
}
default:
return state
}
}

正如预期的那样,现在抛出打字稿错误:

[ts] 属性"有效负载"在类型"操作"上不存在

但是从迁移指南中我也不知道应该更改什么。有什么想法吗?

您可以创建自己的已定义payload的操作类型,请查看示例应用以供参考:

class AddBookAction implements Action {
readonly type = ADD_BOOK;
constructor(public payload: Book) {}
}

然后在化简器中使用该类型:

function reducer(state = initialState, action: AddBookAction): State

可以像这样调度操作:

this.store.dispatch(new AddBookAction(book));

另请注意,示例应用将化简器可以采用的所有操作类型组合到单个联合类型中:

export type Actions =
| AddBookAction
| AddBookSuccessAction
export function reducer(state = initialState, action: Actions): State

好的,这是一个非常有趣的话题。我错过了新的现实 (4.0(,但我在我的存储库中更新了库,我发现我遇到了同样的问题。

没错。有效负载属性已从新版本的操作中删除。如果您使用效果来调度操作,解决方案很简单,您可以在迁移说明中阅读它们吗

但是,如果您希望调度传递有效负载,则可以通过以下方式创建参数化操作:

export interface ActionWithPayload<T> extends Action {
payload: T;
} 

所以如果你添加了这个接口,你可以这样改变减速器:

export class SomeObject {
company: string;
site: string;
department: string;
line: string;
}
export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: ActionWithPayload<SomeObject>): ITitle {
switch (action.type) {
case 'SET_TITLE':
return {
company: action.payload.company,
site: action.payload.site,
department: action.payload.department,
line: action.payload.line
}
...

这是我发现的最好的走动。我必须更好地理解这种变化的原因,如果我能找到更好的灵魂,我会在这里添加它们

请在app.module.ts中进行更改

imports: [
StoreModule.forRoot({ appTutorial: TutorReducer } as ActionReducerMap<any,any>),
]

它可以消除错误。

我也发现这种方法很有帮助:使用as子句导入原始Action接口,并使用payload属性对其进行扩展。

在这种情况下,无需更改代码的其余部分:https://blog.dmbcllc.com/upgrade-ngrx-4-x/。

我在这里看到相同的错误消息,但有另一个原因:

在我的构建器上,我有类似的东西:

.addCase(setFlight.type, (state, action) => {
state.flight = action.payload
});

使用这样的操作:

const setFlight = createAction<Flight>('flight/set');

然后总是收到错误"有效负载在类型操作中不存在",我应该做的是删除.addCase()的第一个参数中的type,所以化简器应该看起来像这样:

.addCase(setFlight, (state, action) => {
state.flight = action.payload
});

现在,payload在下拉列表中可用,错误消失了。

最新更新