NGRX reducer problem : Argument of type "X" is not assignable to parameter of type "Y"

Question

I got an error after a successfull compilation of an angular app build with ngrx.

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.

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.

Answer 1

You seem to be including parameter commercialOffers in the action. 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