NgRx 存储，出现错误属性“产品”在类型“ActionCreatorProps<{payload:Product[];”上不存在 }> 创建减速器时

Question

我正在 Angular 14 应用程序中开发 @ngRx/store 包。我想做的是创建一个可以保存基本对象数组的基本存储。我的操作文件如下所示：

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

我的减速器文件如下所示：

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

我一直在试图找出在减速器文件中遇到的错误

错误：src/app/store/product-store/product.reducer.ts:25:37 - 错误 TS2339：属性“products”在类型“ActionCreatorProps<{ payload: Product[];”上不存在 }> & TypedAction & { 类型：字符串；}'。25 on(loadProductsSuccess, (状态, { 产品 }) => ({

错误：src/app/store/product-store/product.reducer.ts:31:37 - 错误 TS2339：类型“ActionCreatorProps<{ 有效负载：Product[];”上不存在属性“错误”；}> & TypedAction & { 类型：字符串；}'。31 on(loadProductsSuccess, (状态, { 错误 }) => ({

我已经阅读了多个文档，但无法找到任何解决方案。有人可以帮忙吗。文章和例子但没有解决这个问题，我什至不知道我做错了什么。

Answer 1

您缺少道具的初始化。

你的代码应该是：

export const loadProductsSuccess = createAction(
  ActionType.LOAD_PRODUCTS_SUCCESS,
  props<{ payload: Product[] }>(),
);

export const loadProductsFailure = createAction(
  ActionType.LOAD_PRODUCTS_FAILURE,
  props<{ error: string }>(),
);

我很惊讶 TS/ESLint 没有将缺少的函数调用标记为错误。