Complex state management with derived calculations
$29.99
$19.99
$39.99
$24.99
Your cart is empty
{
"totalItems": 0,
"subtotal": 0,
"discountCode": "",
"hasDiscount": false,
"itemCount": 0
}This shopping cart demonstrates advanced NextTinyRXStore features:
const cartStore = createFieldStore({
items: [] as CartItem[],
discountCode: "",
shippingAddress: null as Address | null,
})
.derived("totalItems", ["items"],
({ items }) => items.reduce((sum, item) =>
sum + item.quantity, 0)
)
.derived("subtotal", ["items"],
({ items }) => items.reduce((sum, item) =>
sum + (item.price * item.quantity), 0)
)
.derived("hasDiscount", ["discountCode"],
({ discountCode }) => discountCode.length > 0
);const addItem = (product: Product) => {
const existingItem = items.find(
item => item.id === product.id
);
if (existingItem) {
cartStore.setters.setItems(
items.map(item =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
)
);
} else {
cartStore.setters.setItems([
...items,
{ ...product, quantity: 1 }
]);
}
};// Only re-render when specific fields change
const { items, totalItems, subtotal } = cartStore.useFields([
"items", "totalItems", "subtotal"
]);
// Cart header only watches totalItems - won't re-render on item changes
const totalItems = cartStore.useField("totalItems");
// Discount section only watches discount-related fields
const { discountCode, hasDiscount } = cartStore.useFields([
"discountCode", "hasDiscount"
]);