更新时更新Angular Store中的单个对象

interface Product {
  id: number;
  name: string;
  quantity: number;
}

interface CartState {
  products: Product[];
}

const initialState: CartState = {
  products: [
    { id: 1, name: 'Product 1', quantity: 1 },
    { id: 2, name: 'Product 2', quantity: 1 },
  ],
};

import { createReducer, on } from '@ngrx/store';

const cartReducer = createReducer(
  initialState,
  on(updateProductQuantity, (state, { productId, quantity }) => {
    return {
      ...state,
      products: state.products.map(product =>
        product.id === productId ? { ...product, quantity } : product
      ),
    };
  })
);

export function updateProductQuantity(state, action) {
  return {
    type: '[Cart] Update Product Quantity',
    payload: action,
  };
}

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { updateProductQuantity } from './cart.reducer';

@Component({
  selector: 'app-cart',
  template: `
    <div *ngFor="let product of products">
      {{ product.name }} - Quantity: {{ product.quantity }}
      <button (click)="updateQuantity(product.id, product.quantity + 1)">+</button>
    </div>
  `,
})
export class CartComponent {
  products$ = this.store.select(state => state.cart.products);

  constructor(private store: Store<{ cart: CartState }>) {}

  updateQuantity(productId: number, quantity: number) {
    this.store.dispatch(updateProductQuantity({ productId, quantity }));
  }
}

const cartReducer = createReducer(
  initialState,
  on(updateProductQuantity, (state, { productId, quantity }) => {
    return {
      ...state,
      products: state.products.map(product =>
        product.id === productId ? { ...product, quantity } : product
      ),
    };
  })
);

updateQuantity(productId: number, quantity: number) {
  this.store.dispatch(updateProductQuantity({ productId, quantity }));
}