Question

我的角度（4.x）应用中有@ngrx/store个套餐，我正在升级v 2.2.2 - ＆gt; v的 4.0.0 即可。我可以看到迁移说明说：

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

然而，他们给出的例子似乎完全违反直觉（在我看来......）。

我有一个reducer函数，如下所示：

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]财产＆＃39;有效载荷＆＃39;类型＆＃39;行动＆＃39;
上不存在

但是我从迁移指南中不知道这应该改变什么。有什么想法吗？

Answer 1

您可以创建自己定义了payload的操作类型，请查看the example app以供参考：

class AddBookAction implements Action {
    readonly type = ADD_BOOK;

    constructor(public payload: Book) {}
}

然后在the reducer中使用该类型：

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

可以像this一样调度行动：

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

另请注意示例应用combines减速器可以采用单个联合类型的所有动作类型：

export type Actions =
    | AddBookAction
    | AddBookSuccessAction

export function reducer(state = initialState, action: Actions): State

Answer 2

好的，这是一个非常有趣的话题。我错过了新的realese（4.0），但我在我的仓库中更新了库，我发现我遇到了同样的问题。

那是对的。 Payload属性已从新版本的Action中删除。如果您使用效果来分派动作，解决方案很简单，您可以在migration note

中阅读它们

但是如果你想让dispatch传递有效载荷，你可以用这种方式创建参数化的Action：

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

因此，如果您添加了此界面，则可以通过以下方式更改reducer：

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

这是我找到的最好的解决方案。我必须更好地理解这种变化的原因，如果我能找到更好的解决方案，我在这里添加它们

Answer 3

我还发现这种方法很有用：使用Action子句导入原始as接口，并使用payload属性扩展它。

在这种情况下，不需要更改其余代码：https://blog.dmbcllc.com/upgrade-ngrx-4-x/。

财产和有效载荷＆＃39;类型＆＃39;行动＆＃39;不存在升级@ ngrx / Store时

3 个答案: