升级 @ngrx/Store 时，“Action”类型上不存在属性“payload”

我有@ngrx/store打包在我的 Angular (4.x) 应用程序中，并从 v 升级2.2.2 -> v4.0.0。我可以看到迁移注释说：

Payload 属性已从 Action 接口中删除。

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

我有一个减速器函数，如下所示：

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] 类型“Action”上不存在属性“payload”

但我从迁移指南中不知道应该将其更改为什么。有任何想法吗？

您可以创建自己的操作类型，该类型具有payload定义，检查示例应用程序 https://github.com/ngrx/platform/blob/48a2381c212d5dd3fa2b9435776c1aaa60734235/example-app/app/books/actions/collection.ts#L17以供参考：

class AddBookAction implements Action {
    readonly type = ADD_BOOK;

    constructor(public payload: Book) {}
}

然后使用该类型减速机 https://github.com/ngrx/platform/blob/48a2381c212d5dd3fa2b9435776c1aaa60734235/example-app/app/books/reducers/collection.ts#L15:

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

可以像这样调度动作this https://github.com/ngrx/platform/blob/48a2381c212d5dd3fa2b9435776c1aaa60734235/example-app/app/books/containers/selected-book-page.ts#L33:

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

另请注意，示例应用程序combines https://github.com/ngrx/platform/blob/48a2381c212d5dd3fa2b9435776c1aaa60734235/example-app/app/books/actions/collection.ts#L75减速器可以采用单个联合类型的所有操作类型：

export type Actions =
    | AddBookAction
    | AddBookSuccessAction

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