NgRx store, getting error Property 'products' does not exist on type 'ActionCreatorPr-CodePudding

I am working on @ngRx/store package in Angular 14 App. What I am trying to do is create a basic store which could hold a basic object Array. My action file looks like this :

import { Product } from 'src/app/data-models/product-data-models';
import { ActionType } from "./../store.config";

export const loadProducts = createAction(ActionType.LOAD_PRODUCTS);

export const loadProductsSuccess = createAction(
    ActionType.LOAD_PRODUCTS_SUCCESS,
    props<{ payload: Product[] }>
);

export const loadProductsFailure = createAction(
    ActionType.LOAD_PRODUCTS_FAILURE,
    props<{ error: string }>
);

My reducer file looks like this:

import { createReducer, on } from '@ngrx/store';
import { Product } from 'src/app/data-models/product-data-models';

import { loadProducts, loadProductsSuccess, loadProductsFailure } from './product.action';


export interface ProductsState {
    products: Product[];
    error: string | null;
    status: 'loading' | 'pending' | 'success' | 'error';    
}

export const initialState: ProductsState = {
    products: [],
    error: null,
    status: 'pending'
};

export const booksReducer = createReducer(
  initialState,
  on(loadProducts, (state) => ({
    ...state,
    status: 'pending'
  })),
  on(loadProductsSuccess, (state, { payload }) => ({
    ...state,
    products: payload,
    error: null,
    status: 'success'
  })),
  on(loadProductsSuccess, (state, { error }) => ({
    ...state,
    error: error,
    status: 'error'
  }))
);

I have been trying to figure out the error I am getting in the reducer file

Error: src/app/store/product-store/product.reducer.ts:25:37 - error TS2339: Property 'products' does not exist on type 'ActionCreatorProps<{ payload: Product[]; }> & TypedAction & { type: string; }'. 25 on(loadProductsSuccess, (state, { products }) => ({

Error: src/app/store/product-store/product.reducer.ts:31:37 - error TS2339: Property 'error' does not exist on type 'ActionCreatorProps<{ payload: Product[]; }> & TypedAction & { type: string; }'. 31 on(loadProductsSuccess, (state, { error }) => ({

I have gone through multiple documentation but I am not able to find any solution for this. Can someone help. Articles and examples but nothing solves this and I don't even know what I am doing wrong.

CodePudding user response：

You're missing the initialization of the props.

Your code should be:

export const loadProductsSuccess = createAction(
  ActionType.LOAD_PRODUCTS_SUCCESS,
  props<{ payload: Product[] }>(),
);

export const loadProductsFailure = createAction(
  ActionType.LOAD_PRODUCTS_FAILURE,
  props<{ error: string }>(),
);

I'm surprised TS/ESLint didn't flag the missing function call as an error.