Dominando el Estado Global en Blazor WebAssembly

En una aplicación Blazor WebAssembly, para mantener un estado global que sea accesible en toda la aplicación, puedes crear un servicio de estado que contenga la información que deseas compartir entre componentes. Este servicio debe ser registrado como un servicio singleton o scoped en Program.cs, dependiendo del ciclo de vida que prefieras.

Pasos para crear un estado global:

1. Crea una clase para el estado global

Primero, crea una clase que represente el estado global. Esta clase contendrá las propiedades y métodos necesarios para gestionar el estado de la aplicación.

public class AppState
{
    // Ejemplo de propiedad para manejar el estado del usuario autenticado
    public string UserName { get; set; }

    // Método para actualizar el estado
    public void SetUser(string userName)
    {
        UserName = userName;
        NotifyStateChanged();
    }

    // Evento para notificar a los componentes cuando el estado cambia
    public event Action OnChange;

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

2. Registra el estado en Program.cs

En Program.cs, registra el servicio de estado como un servicio singleton o scoped. En el caso de una aplicación Blazor WebAssembly, es recomendable registrarlo como scoped para que se mantenga durante la sesión del usuario.

builder.Services.AddScoped<AppState>();

3. Inyecta el estado en los componentes

Ahora, puedes inyectar el servicio de estado en cualquier componente que necesite acceder a él. Usa el decorador @inject para inyectar la instancia del servicio.

@page "/somepage"
@inject AppState AppState

<h3>Bienvenido, @AppState.UserName</h3>

<button @onclick="UpdateUserName">Actualizar Nombre de Usuario</button>

@code {
    private void UpdateUserName()
    {
        AppState.SetUser("NuevoUsuario");
    }
}

En este ejemplo, el componente puede leer y modificar el estado global a través del servicio AppState.

4. Reactivar el renderizado en otros componentes

Si deseas que otros componentes se actualicen automáticamente cuando el estado cambie, puedes suscribirte al evento OnChange en el componente.

@implements IDisposable
@inject AppState AppState

<h3>Usuario Actual: @AppState.UserName</h3>

@code {
    protected override void OnInitialized()
    {
        // Suscribirse al evento de cambio de estado
        AppState.OnChange += StateHasChanged;
    }

    public void Dispose()
    {
        // Desuscribirse para evitar fugas de memoria
        AppState.OnChange -= StateHasChanged;
    }
}

De esta forma, cuando el estado cambie en un componente, todos los componentes suscritos se volverán a renderizar automáticamente.

Alternativa: Blazor Fluxor o Redux

Si prefieres una arquitectura más estructurada para manejar el estado global, puedes usar una biblioteca como Blazor.Fluxor que implementa un patrón similar a Redux para el manejo del estado. Esto es útil para aplicaciones más grandes que requieren un control más detallado del flujo de estado.

Con estos pasos, puedes mantener un estado global y compartirlo entre los componentes de tu aplicación Blazor WebAssembly.