Angular14中NgRx Store创建Reducer时报TS2339错误：属性不存在

你的TS2339错误来自两个明确的笔误，修正后即可解决问题：

错误原因分析 #

1. Action匹配错误：reducer中处理失败状态的分支，错误使用了loadProductsSuccess action，应该替换为对应失败逻辑的loadProductsFailure
2. 字段解构不匹配：从报错信息可见，你在loadProductsSuccess的处理函数中尝试解构products属性，但你的action定义里传递的是payload字段，二者类型不匹配

修正后的Reducer代码 #

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 productsReducer = createReducer(
  initialState,
  on(loadProducts, (state) => ({
    ...state,
    status: 'loading' // 这里建议改为loading，更符合"正在加载"的语义
  })),
  on(loadProductsSuccess, (state, { payload }) => ({
    ...state,
    products: payload,
    error: null,
    status: 'success'
  })),
  on(loadProductsFailure, (state, { error }) => ({ // 替换为正确的失败Action
    ...state,
    error: error,
    status: 'error'
  }))
);

额外优化提示 #

• 将原booksReducer重命名为productsReducer，避免命名与业务逻辑混淆
• 初始状态的pending在触发loadProducts时切换为loading，更符合状态流转的常规语义
• 确保Action定义的字段与Reducer中的解构字段严格对应：loadProductsSuccess传递payload，loadProductsFailure传递error

内容的提问来源于stack exchange，提问作者Gaurav Tyagi