参数"动作"和"动作"的类型不兼容，属性"有效载荷"在 Angular ngrx 中丢失

Question

我是angular的新手。在这里，我使用ngrx来管理我的angular应用程序中的状态。但是当我编译时，我得到了以下错误。它说"参数类型" action "one_answers" action "是不相容的"我想知道这个问题的原因以及如何解决这个问题?

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.

这是我的shoppingList.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;
}

这是shoppingList.reducer.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.module.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 { }

Answer 1

您的问题是由于签名问题，

Method StoreModule.forRoot<unknown,>(reducers: ActionReducerMap<unknown,>)

从技术上讲，你传递了一个正确的参数，但它仍然说你的动作object参数包含一个字段调用payloadAction中没有ActionReducerMap<unknown,>。从技术上讲，它不应该是一个错误，因为你已经继承了动作到动作类

类AddIngredient实现动作{

但不幸的是，很明显ActionReducerMap<unknown,>不是从"@ngrx/存储">或者它们不相同，从而给出编译错误。

因为你没有其他的选择，你必须像下面这样修复它:-

首先创建你的状态就像你的shopping-list.reduce .ts

export interface ShoppingListState{
ingredients: Ingredient[];
}
const initialState: ShoppingListState = {
ingredients: [
new Ingredient('Apples', 5),
new Ingredient("Tomatoes", 4),
]
};

还可以像下面这样修改你的reducer方法:-

export function shoppingListReducer(state: ShoppingListState = initialState, 
action: shoppingListActions.AddIngredient): ShoppingListState {
switch(action.type){

现在创建一个文件调用index.ts(在reducer文件的相同位置-您也可以提供不同的名称)，如下所示，在您的action文件夹

下

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

现在把这个reducer导入你的app.module.ts

import { reducers } from './reducers/'

和修改你的代码如下

StoreModule.forRoot(reducers)

也尽量避免像下面这样声明变量。

payload: Ingredient;

最好使用构造函数并像下面这样修改代码:-

export class AddIngredient implements Action {
readonly type = ADD_INGREDIENT;
constructor(public payload: Ingredient){}
}

希望这将解决您的问题。