typescript 升级@ngrx/Store 时，类型“Action”上不存在属性“payload”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45412448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Property 'payload' does not exist on type 'Action' when upgrading @ngrx/Store
提问by George Edwards
I have the @ngrx/storepackage in my angular (4.x) app, and am upgrading from v2.2.2-> v4.0.0. I can see that the migration notes say:
我的@ngrx/storeangular (4.x) 应用程序中有这个包，并且正在从 v 2.2.2-> v 4.0.0升级。我可以看到迁移说明说：
The payload property has been removed from the Action interface.
有效载荷属性已从操作界面中删除。
However, the example they give seems completely counter intuitive (in my view...).
然而，他们给出的例子似乎完全违反直觉（在我看来......）。
I have a reducer function which looks like this:
我有一个减速器功能，它看起来像这样：
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
}
}
Which as expected now throws typescript error:
正如预期的那样，现在会引发打字稿错误：
[ts] Property 'payload' does not exist on type 'Action'
[ts] 类型“Action”上不存在属性“payload”
But I have no idea from the migration guide what this should be changed too. Any ideas?
但是我从迁移指南中不知道这也应该改变什么。有任何想法吗？
回答by Sergey Karavaev
You can create your own action type that has a payloaddefined, check the example appfor reference:
您可以创建自己的已payload定义操作类型，请查看示例应用程序以供参考：
class AddBookAction implements Action {
readonly type = ADD_BOOK;
constructor(public payload: Book) {}
}
Then use that type in the reducer:
然后在减速器中使用该类型：
function reducer(state = initialState, action: AddBookAction): State
Action could be dispatched like this:
可以像这样调度动作：
this.store.dispatch(new AddBookAction(book));
Note also that the example app combinesall the action types that a reducer can take into a single union type:
另请注意，示例应用程序将reducer 可以采用的所有操作类型合并为一个联合类型：
export type Actions =
| AddBookAction
| AddBookSuccessAction
export function reducer(state = initialState, action: Actions): State
回答by Jaroslaw K.
Ok, it's very interesting topic. I missed new realese (4.0) but I updated libraries in my repo and I saw that I have the same problem.
好的，这是一个非常有趣的话题。我错过了 new realese (4.0) 但我更新了我的仓库中的库，我发现我有同样的问题。
That's right. Payload attribute was deleted from Action in new release. If are you use effects to dispatch action, solution is simple and can you read them in migration note
那就对了。Payload 属性已从新版本中的 Action 中删除。如果您使用效果来分派动作，解决方案很简单，您可以在迁移说明中阅读它们
but if you want dispatch to pass payload, you can create parametrizied Action in this way:
但是如果你想让 dispatch 传递有效载荷，你可以通过这种方式创建参数化的 Action：
export interface ActionWithPayload<T> extends Action {
payload: T;
}
so if you added this interface you can change reducer in this way:
因此，如果您添加了此接口，则可以通过以下方式更改减速器：
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
}
...
It's the best walkaround, what I found. I must understand better the reason for this change, and if I will find better soulution I added them here
这是我发现的最好的解决方法。我必须更好地理解这种变化的原因，如果我能找到更好的解决方案，我将它们添加到这里
回答by Peter Kassenaar
I also found this approach to be helpful: to import the original Actioninterface with the asclause and extend it with a payloadproperty.
我还发现这种方法很有帮助：Action使用as子句导入原始接口并使用payload属性扩展它。
In this case no changes to the rest of the code are necessary: https://blog.dmbcllc.com/upgrade-ngrx-4-x/.
在这种情况下，不需要更改其余代码：https: //blog.dmbcllc.com/upgrade-ngrx-4-x/。
