Real-World Examples

public record Product(string Id, string Name, decimal Price);
public record CartItem(Product Product, int Quantity);

public record CartState(ImmutableList<CartItem> Items)
{
    public decimal Total => Items.Sum(i => i.Product.Price * i.Quantity);
    public int ItemCount => Items.Sum(i => i.Quantity);

    public CartState AddItem(Product product)
    {
        var existing = Items.FirstOrDefault(i => i.Product.Id == product.Id);
        return existing != null
            ? this with { Items = Items.Replace(existing, existing with { Quantity = existing.Quantity + 1 }) }
            : this with { Items = Items.Add(new CartItem(product, 1)) };
    }

    public CartState UpdateQuantity(string productId, int quantity) =>
        quantity <= 0 ? RemoveItem(productId)
        : this with {
            Items = Items.Select(i =>
                i.Product.Id == productId ? i with { Quantity = quantity } : i
            ).ToImmutableList()
        };

    public CartState RemoveItem(string productId) =>
        this with { Items = Items.RemoveAll(i => i.Product.Id == productId) };
}

@page "/products"
@inherits StoreComponent<ProductState>

<!-- 1. Debounced search -->
<input @oninput="@(e => UpdateDebounced(s => s.SetQuery(e.Value?.ToString() ?? ""), 300))"
       placeholder="Search..." />

<!-- 2. Load with ExecuteAsync -->
<button @onclick="Search">Search</button>

<!-- 3. Display with AsyncData -->
@if (State.Products.IsLoading) { <p>Loading...</p> }
@if (State.Products.HasData)
{
    @foreach (var product in State.Products.Data)
    {
        <div @onclick="@(() => LoadDetails(product.Id))">@product.Name</div>
    }
}

@code {
    async Task Search() =>
        await ExecuteAsync(
            () => ProductService.SearchAsync(State.Query),
            loading: s => s with { Products = s.Products.ToLoading() },
            success: (s, data) => s with { Products = AsyncData.Success(data) }
        );

    async Task LoadDetails(int id)
    {
        // 4. LazyLoad with caching
        var details = await LazyLoad(
            $"product-{id}",
            () => ProductService.GetDetailsAsync(id),
            TimeSpan.FromMinutes(5));

        await Update(s => s.AddDetails(id, details));
    }
}

// ✅ Use records for state
public record AppState(int Count, string Name);

// ✅ Use 'with' expressions
public AppState Increment() => this with { Count = Count + 1 };

// ✅ Use ImmutableList/ImmutableDictionary
public record State(ImmutableList<Item> Items);

// ✅ Keep state methods pure (no I/O, no logging)
public State AddItem(Item item) => this with { Items = Items.Add(item) };

// ✅ Batch updates when possible
await Update(s => s.SetLoading(true).ClearErrors().ResetForm());

// ❌ Don't mutate state
public void Increment() { Count++; }  // Wrong!

// ❌ Don't use mutable collections
public record State(List<Item> Items);  // Wrong!

// ❌ Don't add side effects to state methods
public State AddItem(Item item)
{
    _logger.Log("Adding");  // Wrong! Side effect!
    return this with { Items = Items.Add(item) };
}

// ✅ Do side effects in components instead
@code {
    async Task AddItem(Item item)
    {
        Logger.LogInformation("Adding item");
        await Update(s => s.AddItem(item));
    }
}