Javascript NgRx createReducer（）和on（）出现错误

我是新来的。到NgRx

当我尝试使用

createReducer（）

创建reducer时，我得到了错误

预期的4个参数，但得到了2个。

当我试图将第三个和第四个参数传递为null时，我得到了一个错误

Argument of type '(state: any, { updatedValue }: any) => any' is not assignable to parameter of type 'readonly ActionCreator<string, FunctionWithParametersType<any[], object>>[]'.
  Type '(state: any, { updatedValue }: any) => any' is missing the following properties from type 'readonly ActionCreator<string, FunctionWithParametersType<any[], object>>[]': concat, join, slice, indexOf, and 15 more.ts(2345)

动作代码

import { createAction, props } from '@ngrx/store';
import { Ingredient } from '../../shared/ingredient.model';


export const ADD_INGREDIENT = 'ADD_INGREDIENT';

export const AddIngredient = createAction(
  ADD_INGREDIENT,
  props<Ingredient>()
);

package.json

"dependencies": {
    "@angular/animations": "^11.2.1",
    "@angular/common": "^11.2.1",
    "@angular/compiler": "^11.2.1",
    "@angular/core": "^11.2.1",
    "@angular/forms": "^11.2.1",
    "@angular/platform-browser": "^11.2.1",
    "@angular/platform-browser-dynamic": "^11.2.1",
    "@angular/router": "^11.2.1",
    "@ngrx/store": "^11.0.1",
    "bootstrap": "3.3.7",
    "core-js": "^3.1.2",
    "rxjs": "^6.0.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  }

---

你的动作和减速器看起来很奇怪。根据文档，应该是这样的：

export interface MyState {
    ingredients: Array<Ingredient>;
}

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

// see  https://ngrx.io/guide/store/actions
// note: the prop has a 'name: Type', not just 'Type'
export const AddIngredient = createAction(
    ADD_INGREDIENT,
    props<{ingredient: Ingredient}>()
);

// verbose func to show difference
export const shoppingListReducer = createReducer(
  initialState,
  on(
    AddIngredient, // the action, not the action.type
    (state, { ingredient }) => {
      let ingredients = Array.from(state.ingredients);
      ingredients.push(ingredient);
      return { ingredients };
    }
  )
);

要点是：

(state: any, { updatedValue }: any) => ({ ...state, prop: updatedValue })

• 需要一个名为updatedValue的道具的操作（与“操作”相比，道具现在已命名）
• 返回从当前状态组装的对象和名为prop（*）的字段

（*）如果这起作用，它将导致像

interface MyAccidentalState {
  ingredients: Array<Ingredient>;
  prop: Ingredient;
}

接口MyAccidentalState{
成份：阵列；
道具：成分；
}

。。。但它不起作用，因为您的操作没有命名的prop'updatedValue'，并且

prop:updatedValue

不是

{prop:updatedValue}

由于它没有命名的prop“updatedValue”，编译器在

（state:any，{updatedValue}:any）=>…

而

（state:any，{updatedValue}:any）=>…

中的any键入可能会否定编译器已经存在的一些知识：updatedValue本来是一个成分，state（现在）是一个MyState

旁注：

---

保持收藏的状态可能很有用，但您的方法也是有效的。

确保@ngrx/store库版本和您安装的@angular/core版本没有错配

通常，它们应该在同一主版本上-对于@angular/core ^9.x.x，您应该使用相应的@ngrx/store ^9.x.x版本。当我在Angular 9上安装最新、稳定的ngrx版本（目前是11.x.x）时，这种情况就发生了

---

阅读更多关于需求的信息（链接指V9，但也可以适用于较新的需求）：

此代码不适用于我-得到与OP相同的错误

// equal shorthand function
export const shoppingListReducer = createReducer(
  initialState,
  on(
    AddIngredient, // the action, not the action.type
    (state, { ingredient }) => ({ingredients: [...state.ingredients, ingredient]})
  )
);

(state: any, { updatedValue }: any) => ({ ...state, prop: updatedValue })

interface MyAccidentalState {
  ingredients: Array<Ingredient>;
  prop: Ingredient;
}