[英]NGRX reducer problem : Argument of type "X" is not assignable to parameter of type "Y"
I got an error after a successfull compilation of an angular app build with ngrx.使用 ngrx 成功编译 angular 应用程序构建后出现错误。
ERROR in src/app/store/cart-items.reducer.ts:17:62 - error TS2345: Argument of type '{ items: CartItem[]; bestCommercialOfferValue: number; }' is not assignable to parameter of type 'CartItemsState'.
Property 'commercialOffers' is missing in type '{ items: CartItem[]; bestCommercialOfferValue: number; }' but required in type 'CartItemsState'.
17 on(DeleteCartItem, (state, action) => (deleteReturnState(state, action.isbn))),
~~~~~
src/app/store/cartItemsState.ts:7:5
7 commercialOffers: CommercialOffer[];
~~~~~~~~~~~~~~~~
'commercialOffers' is declared here.
src/app/store/cart-items.reducer.ts:18:73 - error TS2345: Argument of type '{ items: CartItem[]; bestCommercialOfferValue: number; }' is not assignable to parameter of type 'CartItemsState'.
18 on(UpdateQuantityToBuyCartItem, (state, action) => (GetUpdatedState(state, action.cartItem))),
~~~~~
This error appear in a specific reducer file cart-item.reducer.ts after adding a field commercialOffers on the concerned state object.在相关状态对象上添加字段 CommercialOffers 后,此错误出现在特定的减速器文件 car-item.reducer.ts 中。
import { CartItem } from '../models/cartItem';
import { CommercialOffer } from '../models/commercialOffer';
export interface CartItemsState {
items: CartItem[];
bestCommercialOfferValue: number;
commercialOffers: CommercialOffer[];
}
The reducer file concerned looks like this :有关的减速器文件如下所示:
import { Action, createReducer, on } from '@ngrx/store';
import { CartItem } from '../models/cartItem';
import { CommercialOffer } from '../models/commercialOffer';
import { AddCartItem, DeleteCartItem, UpdateQuantityToBuyCartItem, ClearCart, ApiGetCommercialOffersSuccess } from './actions';
import { CartItemsState } from './cartItemsState';
export const initialState: CartItemsState = {
items: [],
bestCommercialOfferValue: 0,
commercialOffers: []
};
const _cartItemsReducer = createReducer(
initialState,
on(AddCartItem, (state, action) => ({ items: [...state.items, action.data], bestCommercialOfferValue: state.bestCommercialOfferValue })),
on(DeleteCartItem, (state, action) => (deleteReturnState(state, action.isbn))),
on(UpdateQuantityToBuyCartItem, (state, action) => (GetUpdatedState(state, action.cartItem))),
on(ClearCart, (state, action) => ({ items: [], bestCommercialOfferValue: 0, commercialOffers: [] })),
on(ApiGetCommercialOffersSuccess, (state, action) => ({ items: state.items, bestCommercialOfferValue: getBestCommercialOffer(state.items, action.commercialOffers) })));
function getBestCommercialOffer(actualCartItems: CartItem[], bunchOfCommercialOffers: CommercialOffer[]): number {
const subTotal = actualCartItems.reduce((sum, current) => sum + current.bookInfos.price * current.quantityToBuy, 0);
const reductionValues: number[] = [];
bunchOfCommercialOffers.forEach(actualCommercialOffer => {
if (actualCommercialOffer.type == "percentage") {
reductionValues.push(actualCommercialOffer.value);
} else if (actualCommercialOffer.type == "minus") {
reductionValues.push(actualCommercialOffer.value);
} else if (actualCommercialOffer.type == "slice") {
const sliceValue = actualCommercialOffer.sliceValue;
const reductionValue = actualCommercialOffer.value;
const multiply = Math.trunc(subTotal / sliceValue);
reductionValues.push(reductionValue * multiply);
}});
return reductionValues.reduce((previousValue, actualValue) => previousValue = previousValue > actualValue ? previousValue : actualValue, 0);}
function deleteReturnState(actualCartItemsState: CartItemsState, isbn: string): CartItemsState {
return {
items: actualCartItemsState.items.filter(item => item.bookInfos.isbn != isbn),
bestCommercialOfferValue: actualCartItemsState.bestCommercialOfferValue,
commercialOffers: actualCartItemsState.commercialOffers
}
}
function GetUpdatedState(actualCartItemsState: CartItemsState, cartItemToUpdate: CartItem): CartItemsState {
const newList: CartItem[] = [];
actualCartItemsState.items.forEach(cartItem => {
const newCartItem = <CartItem>{
bookInfos: cartItem.bookInfos,
quantityToBuy: cartItem.quantityToBuy
}
if (cartItem.bookInfos.isbn == cartItemToUpdate.bookInfos.isbn) {
newCartItem.quantityToBuy = cartItemToUpdate.quantityToBuy;
}
newList.push(newCartItem)})
return {
items: newList,
bestCommercialOfferValue: actualCartItemsState.bestCommercialOfferValue,
commercialOffers: actualCartItemsState.commercialOffers
}}
export function cartItemsReducer(state: CartItemsState | undefined, action: Action) {
return _cartItemsReducer(state, action);
}
What is strange is that my app can run perfectly even with this error.奇怪的是,即使出现此错误,我的应用程序也能完美运行。
You seem to be including parameter commercialOffers
in the action.您似乎在操作中包含了参数
commercialOffers
。 You will need to include this property in your object for the error to disappear.您需要在对象中包含此属性,错误才会消失。 The other option is as below, if the parameter is optional then you can declare your interface like
另一个选项如下,如果参数是可选的,那么你可以像这样声明你的接口
export const initialState: CartItemsState = {
items: [],
bestCommercialOfferValue: 0,
commercialOffers?: []
};
Note the ?
注意
?
in commercialOffers?: []
that indicates this parameter is optional在
commercialOffers?: []
表示这个参数是可选的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.