升级@ ngrx/Store时,"Action"类型中不存在属性"payload"

Question

我@ngrx/store在我的angular(4.x)应用程序中有包,我从v 2.2.2 - > 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]"行动"类型中不存在属性"有效负载"

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

Answer 1

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

class AddBookAction implements Action {
    readonly type = ADD_BOOK;

    constructor(public payload: Book) {}
}

然后在reducer中使用该类型:

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

行动可以派出像这样:

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

另请注意,示例应用程序将 reducer可以采用的所有操作类型组合为单个联合类型:

export type Actions =
    | AddBookAction
    | AddBookSuccessAction

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

Answer 2

好的,这是非常有趣的话题.我错过了新的realese(4.0),但我在我的仓库中更新了库,我发现我遇到了同样的问题.

那就对了.Payload属性已从新版本的Action中删除.如果您使用效果来分派动作,解决方案很简单,您可以在迁移说明中阅读它们

但是如果你想让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
            }
            ...

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