Patrones de estado en Blazor: servicios reactivos y Flux

El flujo de datos unidireccional es un patrón en el que el estado cambia mediante acciones controladas y después vuelve a proyectarse sobre la vista.

Nuestro State Container sencillo ya encapsulaba un contador, pero un estado con colecciones y muchas operaciones puede terminar exponiendo mutaciones como estas:

// El problema de la escalabilidad
State.Carrito.Add(producto); // Componente A añade
State.Carrito.Clear();       // Componente B borra sin avisar
State.Carrito = null;        // Componente C rompe la app

En una aplicación pequeña, esto es aceptable. Pero en una aplicación empresarial, esto se convierte en una pesadilla de depuración. Si el estado cambia de forma impredecible, los bugs son imposibles de rastrear.

Flux y Redux popularizaron una forma más estricta de organizar estos cambios mediante un único flujo predecible.

Servicios reactivos en Blazor

No necesitamos instalar librerías pesadas de JavaScript para esto. En C#, podemos implementar una versión limpia de este patrón usando Servicios Reactivos.

La clave es encapsular las mutaciones.

Estado de solo lectura

El estado no debe ser modificable desde fuera. Usamos propiedades de solo lectura (get) o listas inmutables (IReadOnlyList).

public class CarritoStore
{
    // Estado interno privado
    private List<Producto> _items = new();

    // Estado público de SOLO LECTURA
    // Nadie puede hacer State.Items.Add(...) desde fuera
    public IReadOnlyList<Producto> Items => _items.AsReadOnly();

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

    // Evento de notificación
    public event Action? OnChange;
}

Acciones expresadas como métodos

En lugar de dejar que el componente toque la lista, exponemos métodos que representan intenciones del usuario, no operaciones de datos crudas.

    // Método que actúa como "Dispatcher" / "Reducer"
    public void AgregarProducto(Producto producto)
    {
        if (producto == null) return;

        // Aquí va la lógica de negocio (validaciones, límites, etc.)
        if (_items.Count >= 10)
        {
            Console.WriteLine("Carrito lleno");
            return;
        }

        _items.Add(producto);

        // Notificamos el cambio
        NotifyStateChanged();
    }

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

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

Librerías: Fluxor

Si tu aplicación es realmente compleja (cientos de pantallas, flujos de trabajo complicados), escribir estos servicios a mano puede volverse tedioso.

Para esos casos, Fluxor es una opción popular y mantenida para aplicar Flux/Redux en aplicaciones .NET y Blazor.

Fluxor te obliga a separar el código en piezas muy pequeñas:

1. Feature: Define el estado inicial.
2. Action: Clases simples (records) que definen mensajes (public record AddItemAction(Item item);).
3. Reducer: Funciones puras que toman el Estado Viejo + Acción y devuelven el Estado Nuevo.
4. Effect: Lógica para efectos secundarios (llamadas API).

// Ejemplo conceptual de Fluxor
// El componente solo hace esto:
Dispatcher.Dispatch(new AddItemAction(nuevoProducto));

Fluxor añade estructura y más piezas, pero puede integrarse con Redux DevTools para inspeccionar acciones y estados durante la depuración.