Encountering an issue with NgRx store where the property 'products' is not recognized on the type 'ActionCreatorProps<{ payload: Product[]; }>' while attempting to build a reducer

Currently, I am delving into the @ngRx/store package within my Angular 14 App. My primary goal is to establish a basic store capable of containing a simple object Array. Here is an excerpt from my action file:

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 }>
);

In addition, this is how my reducer file is structured:

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 grappling with an error in my 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 }) => ({

Despite consulting various resources, including articles and examples, I remain unable to resolve this issue. If anyone could provide assistance, it would be greatly appreciated as I seem to be stuck without knowing where exactly I went wrong.

Answer №1

Make sure to initialize the props in your code.

Here is how your code should look:

export const saveItemsSuccess = createAction(
  ActionType.SAVE_ITEMS_SUCCESS,
  props<{ data: Item[] }>(),
);

export const saveItemsFailure = createAction(
  ActionType.SAVE_ITEMS_FAILURE,
  props<{ issue: string }>(),
);

It's surprising that TS/ESLint didn't catch the missing function call as an error.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code that displays values that are not equal

Here is a code snippet that checks whether two arrays of objects are equal or not. How can we enhance this code to log which answer is not matching? The structure of the arrays: arrayA represents user answered questions, while arrayB contains correct answ ...

Angular 10 issue: Cart quantity in header shared component does not update when changed from another component

Whenever I click on the 'Add to cart' button, I want the number of items in the cart icon on the header component to increase. Currently, this only works when I refresh the page. In order to achieve this, I am using a cart service to store globa ...

The installed NPM package does not contain the necessary TypeScript compiled JS files and declaration files

I have recently released a TypeScript library on NPM. The GitHub repository's dist (Link to Repository Folder) directory includes all compiled JavaScript and d.ts files. However, after running npm i <my_package>, the resulting module contains on ...

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

I am a beginner with Angular 6 and I'm trying to implement functionality where clicking a button or icon will change a text field into an input field. See the snippet of code and expected output below. Thank you in advance. <div> <mat-for ...

TypeScript - Minimize redundancy when defining types for a class and its constructor arguments

Here is a class structure I am currently using: class Person { id?: string = uuid(); name: string; constructor(data: Person) { _.merge(this, data); } } The 'uuid' function generates an id and '_' refers to loda ...

Is Joi's existence a myth?

I've been using Joi for validation, and I've encountered a situation that I'm having trouble with. I have an object that sometimes includes an id field (for editing) and other times it doesn't (for creating). My goal is to validate tha ...

What is the best way to add a repository in Nest.js using dependency injection?

I am encountering an issue while working with NestJS and TypeORM. I am trying to call the get user API, but I keep receiving the following error message: TypeError: this.userRepository.findByIsMember is not a function. It seems like this error is occurring ...

Could you explain the significance of the typscript parameters encapsulated within curly braces?

I'm confused about the syntax in this TypeScript code snippet. Why is the data parameter enclosed in curly braces and followed by a colon and the same data object with a type specification? Can someone explain what this means? addArrivingTruckSuggesti ...

Is it possible to override CSS classes in Ionic without using app.scss?

I'm currently working on designing a dark theme for my ionic application by watching this tutorial. It's been effective for most of the classes, however, I've encountered some CSS classes that only respond to overrides in app.scss. If I try ...

Using Node.js to inject dependencies into the app.js file

As I work on my node.js and typescript application, I followed the approach outlined in an article by Brian Love. You can find a sample code for the server.ts file below: import * as bodyParser from "body-parser"; import * as cookieParser from "cookie-par ...

Issue with initial navigation in MVC app causing Angular app routing to fail

Encountering a problem with navigating within an Angular app hosted on an MVC page. While most of the functionality is working smoothly, there is one scenario where the URL changes but the new page is not displayed. Let's simplify the setup (this iss ...

Adding a dynamic index from ngFor to an HTML attribute value can be accomplished by incorporating the current

I am using ngFor and I am trying to make an attribute inside the loop change its value by adding the ngFor index. This means that each div created within ngFor will have a unique attribute value. Source: <div class="class1" *ngFor="let item of items; l ...

Creating reducers for a unique data type: A step-by-step guide

Today, I was working on enhancing a shopping website using React Typescript and Context API. My goal is to utilize React Reducers to manage the state of my Shopping Cart. I have custom Types defined for the Product type, which includes an Items Array and s ...

Ways to verify the input label in Angular version 4 and above?

I'm working on an Angular component that includes a form structured like this: <form> <label for="Name">Click me</label> <input type="text" id="Name" name="Name" /> <label for="Name2">Click me 2</label> &l ...

Incorporating a JavaScript script into my Angular 7 project

My project requires me to incorporate the "Loadingbar.js" library into one of my pages. You can find this library here: . Initially, I inserted the CSS code into my global "style.css" file. I started by placing the script in my index.html file: <script ...

The Yii2 CORS filter is throwing an error indicating the absence of the 'Access-Control-Allow-Origin' header

After reading through the information provided in this particular question, I have configured my rest controller behavior as follows: public function behaviors() { $behaviors = parent::behaviors(); $auth= $behaviors['authenticator'] = [ ...

What is the best way to delay Angular for 5 seconds before initiating a page transition?

Just a quick inquiry - is there a way to have Angular wait for 5 seconds before redirecting to a different page? I attempted to implement this functionality within my function, but it doesn't appear to be functioning as expected: setTimeout(() => ...

Ways to handle route initialization in Angular 13 when starting the app?

What is the most effective way to handle route resolution before components are loaded? I want to avoid using guards for every single route, and I need to load a component on the '/' path. Using a parent '/' path without a component but ...

Tips for effectively sharing custom validators across different modules

After creating a password validator based on a tutorial, I attempted to use it on multiple forms within different parts of my application. However, I encountered an error stating: Type PasswordValidator is part of the declarations of 2 modules: SignupMod ...

Is moduleId a reserved word in Angular2 / CLI?

After downloading the newest CLI version, I initiated a fresh test project. angular2 version: "^2.3.1" "@angular/compiler-cli": "^2.3.1", "typescript": "~2.0.3" Within AppComponent, there is this constructor: export class AppComponent ...