Cart Total: ${(total / 100).toFixed(2)}
{cartState.items.map(item => {
const itemTotal = getItemCost(item, productsState);
return (
Item Total: ${(itemTotal / 100).toFixed(2)}
);
})}
);
}
```
--------------------------------
### Cart State Management with NgRx and React Hooks
Source: https://context7.com/nrwl/nx-examples/llms.txt
Manages cart state using a Redux pattern. Supports both Angular with NgRx and React with hooks. It defines cart state, items, and actions for updating quantities. Dependencies include '@nx-example/shared/cart/state' for state logic and '@ngrx/store' for Angular.
```typescript
// Define cart state and actions
import { CartActionTypes, SetQuantity } from '@nx-example/shared/cart/state';
import { cartReducer, initialState } from '@nx-example/shared/cart/state';
// Cart state structure
interface CartState {
items: CartItem[];
}
interface CartItem {
productId: string;
quantity: number;
}
// React usage with useReducer
import { useReducer } from 'react';
function CartComponent() {
const [cartState, dispatch] = useReducer(cartReducer, initialState);
// Update quantity
const handleQuantityChange = (productId: string, quantity: number) => {
dispatch(new SetQuantity(productId, quantity));
};
return (
{cartState.items.map(item => (
Product: {item.productId}, Quantity: {item.quantity}
))}