22

@ngrx/store我的Angular (4.x) 应用程序中有该软件包，并且正在从 v 2.2.2 -> v 4.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] 类型“操作”上不存在属性“有效负载”

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

4

5 回答 5

25

您可以创建自己的已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
于 2017-07-31T11:07:25.980 回答
7

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

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

但是如果您希望 dispatch 传递有效负载，您可以通过这种方式创建参数化 Action：

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

这是我发现的最好的绕行方式。我必须更好地理解这种变化的原因，如果我能找到更好的解决方案，我会在此处添加它们

于 2017-07-31T11:28:56.007 回答
2

Please made change in app.module.ts

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

It can remove error.

于 2022-01-10T18:50:01.160 回答
0

我在这里有同样的错误信息，但有另一个原因：

在我的构建器上，我有类似的东西：

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

像这样的动作：

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

然后总是得到错误“有效载荷在类型操作上不存在”，我应该做的是type在第一个参数中删除.addCase()，所以减速器应该是这样的：

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

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

于 2021-12-29T11:51:46.833 回答
0

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

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

于 2017-12-03T20:49:17.320 回答