参数';操作';和';操作';的类型不兼容,角度ngrx中缺少属性';有效负载'; [英] Types of parameters 'action' and 'action' are incompatible, Property 'payload' is missing In Angular ngrx
问题描述
我对棱角分明还不熟悉。在这里,我使用ngrx来管理我的角度应用程序中的状态。但是当我编译时,我得到了以下错误。它说‘动作’和‘动作’的参数类型是不兼容的。我想知道这是什么原因,怎么解决这个问题?
Error: src/app/shopping-list/store/shoppingList.actions.ts:9:5 - error TS2564: Property 'payload' has no initializer and is not definitely assigned in the constructor.
9 payload: Ingredient;
~~~~~~~
src/app/app.module.ts:25:27 - error TS2322: 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'.
25 StoreModule.forRoot({ shoppingList: shoppingListReducer }),
~~~~~~~~~~~~
src/app/shopping-list/store/shoppingList.actions.ts:9:5
9 payload: Ingredient;
~~~~~~~
'payload' is declared here.
这是我的shop pingList.actions.ts文件。
import { Action } from '@ngrx/store'
import { Ingredient } from '../../shared/ingredient.model';
export const ADD_INGREDIENT = 'ADD_INGREDIENT';
export class AddIngredient implements Action {
readonly type = ADD_INGREDIENT;
payload: Ingredient;
}
这是shop pingList.ducer.ts文件。
import { Ingredient } from "src/app/shared/ingredient.model";
import * as shoppingListActions from './shoppingList.actions';
const intialState = {
ingredients: [
new Ingredient("Apples", 3),
new Ingredient("Tomatoes", 4)
]
}
export function shoppingListReducer(state = intialState, action: shoppingListActions.AddIngredient) {
switch (action.type) {
case shoppingListActions.ADD_INGREDIENT:
return {
...state,
ingredients: [...state.ingredients, action.payload]
}
default:
return state;
}
}
这是我的app.mode.ts文件。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRouting } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SharedModule } from './shared/shared.module';
import { CoreModule } from './core.module';
import { shoppingListReducer } from './shopping-list/store/shoppingLis.reducer';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
StoreModule.forRoot({ shoppingList: shoppingListReducer }),
AppRouting,
SharedModule,
CoreModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }
推荐答案
您的问题是由于签名问题,
方法StoreModule.forRoot<;未知,操作&>(缩减器:ActionReducerMap<;未知,操作&>)
从技术上讲,您传递的参数是正确的,但仍然表明您的Action对象参数包含有效负载字段调用,而ActionReducerMap<;UNKNOWN,Action>;的Action参数中没有该字段调用。从技术上讲,这不应该是一个错误,因为您已经将Action继承到您的操作类
类AddIngresient实现操作{
但遗憾的是,很明显ActionReducerMap<;未知,操作&>中的操作 来自‘@ngrx/store’或它们不相同,因此出现编译错误。
由于您没有其他选择,您必须如下所示进行修复:-
首先创建您的状态,如下图所示SPLOING-LIS.REDER.TS
export interface ShoppingListState{
ingredients: Ingredient[];
}
const initialState: ShoppingListState = {
ingredients: [
new Ingredient('Apples', 5),
new Ingredient("Tomatoes", 4),
]
};
还如下所示修改您的减速器方法:-
export function shoppingListReducer(state: ShoppingListState = initialState,
action: shoppingListActions.AddIngredient): ShoppingListState {
switch(action.type){
现在在您的操作文件夹下创建一个名为index.ts的文件(位于Reducer文件的同一位置--您也可以提供不同的名称),如下所示
import { ShoppingListState, shoppingListReducer } from './shopping-list.reducer';
import { ActionReducerMap } from '@ngrx/store';
export const rootReducer = {};
export interface AppState {
shoppingList: ShoppingListState;
};
export const reducers: ActionReducerMap<AppState, any> = {
shoppingList: shoppingListReducer
};
现在将此减速器导入到您的app.mode.ts
import { reducers } from './reducers/'
并如下所示修改代码
StoreModule.forRoot(reducers)
还应尽量避免如下所示的变量声明。
payload: Ingredient;
最好使用构造函数并修改代码,如下所示:-
export class AddIngredient implements Action {
readonly type = ADD_INGREDIENT;
constructor(public payload: Ingredient){}
}
希望这将解决您的问题。
这篇关于参数';操作';和';操作';的类型不兼容,角度ngrx中缺少属性';有效负载';的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!