.ts(2322) Property 'payload' is missing in type 'Action' but required in type 'AddIngredient'

Question

I have been trying to create a sample application to learn ngrx, my application has only one 'Action' ADD_INGREDIENT and it has a reducer function which does operations on the state based on the action types.

my actions file

 import { Action } from "@ngrx/store";
 import { Ingredient } from "src/app/shared/ingredient.model";

export const ADD_INGREDIENT = 'ADD-INGREDIENT';
export class AddIngredient implements Action {
  readonly  type = ADD_INGREDIENT ; 
  payload!: Ingredient ;
}

my reducer

import  * as ShoppingListActions from './shopping-list.actions'
 import { Ingredient } from '../../shared/ingredient.model';

const initialState = {
  ingredients: [
    new Ingredient('Apples', 5),
    new Ingredient('Tomatoes', 10),
  ]
};

export function shoppingListReducer(state = initialState, 
  action: ShoppingListActions.AddIngredient) 
  {
  switch (action.type) {
    case ShoppingListActions.ADD_INGREDIENT:
      return {
        ...state,
        ingredients: [...state.ingredients, action.payload]
      };
  }
}

my app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from './shared/shared.module';
import { CoreModule } from './core.module';
 import { StoreModule } from '@ngrx/store';
import { shoppingListReducer } from './shopping-list/store/shopping-list.reducer';

@NgModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
    StoreModule.forRoot({shoppingList:shoppingListReducer})
  ],
  bootstrap: [AppComponent],
  // providers: [LoggingService]
})
export class AppModule {}

the error

Type '(state: { ingredients: Ingredient[]; } | undefined, action: AddIngredient) => { ingredients: Ingredient[]; }' is not assignable to type 'ActionReducer<{ ingredients: Ingredient[]; }, Action>'.
  Types of parameters 'action' and 'action' are incompatible.
    Property 'payload' is missing in type 'Action' but required in type 'AddIngredient'.ts(2322)
shopping-list.actions.ts(7, 3): 'payload' is declared here.
(property) shoppingList: ActionReducer<{
    ingredients: Ingredient[];
}, Action>

so how I CAN fix this

.ts(2322) Property 'payload' is missing in type 'Action' but required in type 'AddIngredient'

0 Answers0