如何将 NgRx 8 动作与 NgRx 7 减速器一起使用

Question

我正在我的新 Angular 8 项目中使用NgRx库。有人告诉我，他们使用createAction创建动作，即NgRx 8但他们使用NgRx 7创建减速器。我接到了一项任务，其中我使用NgRx 8作为我的减速器，我现在必须更改为NgRx 7.我的动作和减速器如下：

book.actions.ts

import { createAction, props } from "@ngrx/store";
import { Book } from "./book";
export const BeginGetBooksAction = createAction("BeginGetBooks");
export const SuccessGetBooksAction = createAction(
"SuccessGetBooks",
props<{ payload: Book[] }>()
);
export const BeginAddBookAction = createAction(
"BeginAddBook",
props<{ payload: Book }>()
);
export const SuccessAddBookAction = createAction(
"SuccessAddBook",
props<{ payload: Book[] }>()
);

book.reducer.ts

import { Action, createReducer, on } from "@ngrx/store";
import * as BooksActions from "./book.action";
import { Book } from "./book";
export interface BooksState {
Books: Book[];
ReadBooks: { book: Book; addedOn: Date }[];
WantToReadBooks: { book: Book; addedOn: Date }[];
editBook: Book;
}
const initialState: BooksState = {
Books: [],
ReadBooks: [],
WantToReadBooks: [],
editBook: new Book()
};
export function booksReducer(state = initialState, action: Action) {
switch (action.type) {
case BooksActions.BeginGetBooksAction.type:
return state;
case BooksActions.SuccessGetBooksAction.type:
return { ...state, Books: action.payload };
case BooksActions.BeginAddBookAction.type:
return state;
case BooksActions.SuccessAddBookAction.type:
return { ...state, Books: action.payload };
default:
return state;
}
}

我收到一个错误action.payload

Property 'payload' does not exist on type 'Action'.

有人可以告诉我我做错了什么吗???

Answer 1

我在NgRx创建器函数101中写下了一个比较。

在本文中，您可以看到如何组合两个版本的语法：

export const addToCart = createAction(
// action's type
'[Product List] Add to cart',
// optional payload
props<{ sku: string }>(),
)
export const removeFromCart = createAction(
'[Product List] Remove from cart',
props<{ sku: string }>(),
)
export function reducer(
state = initialState,
action: ReturnType<typeof addToCart> | ReturnType<typeof removeFromCart>,
) {
switch (action.type) {
case addToCart.type:
return {
...state,
cartItems: {
...state.cartItems,
[action.sku]: (state.cartItems[action.sku] || 0) + 1,
},
}
case removeFromCart.type:
return {
...state,
cartItems: {
...state.cartItems,
[action.sku]: Math.max((state.cartItems[action.sku] || 0) - 1, 0),
},
}
default:
return state
}
}

Answer 2

你的化简器很好，只是你的类型定义是问题所在。使用不存在有效负载的纯Action类型。尝试其他类型定义(如any或尝试联合类型(，但在尝试联合类型时，需要操作文件中的所有命名导入。 我认为最适合您的解决方案是 reducer 的下一代语法，请尝试使用新格式。