State Patterns in Blazor: Reactive Services and Flux

The unidirectional data flow is a pattern where state changes through controlled actions and is then projected back onto the view.

Our simple State Container already encapsulated a counter, but a state with collections and many operations can end up exposing mutations like these:

// The scalability problem
State.Carrito.Add(producto); // Component A adds
State.Carrito.Clear();       // Component B clears without warning
State.Carrito = null;        // Component C breaks the app

In a small application, this is acceptable. But in an enterprise application, this becomes a debugging nightmare. If the state changes unpredictably, bugs are impossible to trace.

Flux and Redux popularized a stricter way to organize these changes through a single predictable flow.

Reactive Services in Blazor

We don’t need to install heavy JavaScript libraries for this. In C#, we can implement a clean version of this pattern using Reactive Services.

The key is encapsulating mutations.

Read-only state

The state should not be modifiable from outside. We use read-only properties (get) or immutable lists (IReadOnlyList).

public class CarritoStore
{
    // Private internal state
    private List<Producto> _items = new();

    // READ-ONLY public state
    // Nobody can do State.Items.Add(...) from outside
    public IReadOnlyList<Producto> Items => _items.AsReadOnly();

    public decimal Total => _items.Sum(x => x.Precio);

    // Notification event
    public event Action? OnChange;
}

Actions expressed as methods

Instead of letting the component touch the list, we expose methods that represent user intentions, not raw data operations.

    // Method acting as "Dispatcher" / "Reducer"
    public void AgregarProducto(Producto producto)
    {
        if (producto == null) return;

        // Business logic goes here (validations, limits, etc.)
        if (_items.Count >= 10)
        {
            Console.WriteLine("Cart is full");
            return;
        }

        _items.Add(producto);

        // Notify the change
        NotifyStateChanged();
    }

    public void VaciarCarrito()
    {
        _items.Clear();
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();

Libraries: Fluxor

If your application is truly complex (hundreds of screens, complicated workflows), writing these services by hand can become tedious.

For those cases, Fluxor is a popular and maintained option for applying Flux/Redux in .NET and Blazor applications.

Fluxor forces you to separate the code into very small pieces:

1. Feature: Defines the initial state.
2. Action: Simple classes (records) that define messages (public record AddItemAction(Item item);).
3. Reducer: Pure functions that take Old State + Action and return the New State.
4. Effect: Logic for side effects (API calls).

// Conceptual Fluxor example
// The component only does this:
Dispatcher.Dispatch(new AddItemAction(nuevoProducto));

Fluxor adds structure and more pieces, but it can integrate with Redux DevTools to inspect actions and states during debugging.