Understanding State Management in Blazor

Effective state management is crucial for building responsive and maintainable Blazor applications. Blazor offers several approaches, from simple component-level state to more sophisticated global state management patterns.

Component-Level State

The most basic form of state management involves properties within individual Blazor components. These properties hold data that affects the component's UI and behavior. When these properties change, Blazor automatically re-renders the component.

@* Counter.razor *@
@page "/counter"

Counter

Current count: @currentCount

Click me

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
                

Sharing State Between Components

For sharing state between components, you can leverage several patterns:

• Cascading Parameters: Ideal for passing data down the component tree without explicit property passing at each level.
• Event Callbacks: Used for child components to communicate changes back to their parent.
• Services and Dependency Injection: A robust way to manage shared state across different parts of your application.

Using Services for Global State

Dependency Injection (DI) with services is a powerful pattern for managing application-wide state. You can register a service with a scoped or singleton lifetime and inject it into components that need access to the shared data.

AppState.cs
public class AppState
{
    public int SharedCounter { get; set; } = 0;

    public event Action? OnChange;

    public void IncrementSharedCounter()
    {
        SharedCounter++;
        NotifyStateChanged();
    }

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

Program.cs
builder.Services.AddSingleton();

SharedCounterDisplay.razor
@inject AppState AppState
@implements IDisposable

Global Counter: @AppState.SharedCounter

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged;
    }

    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }
}
                

State Management Libraries

For complex applications, consider dedicated state management libraries that offer advanced features like:

• Immutable state
• Time-travel debugging
• Middleware support
• Centralized state reducers

Popular choices include:

• Fluxor: A Redux-inspired state management library for Blazor.
• Blazor-State: Another well-regarded library for managing application state.

Fluxor Example (Conceptual)

Fluxor organizes state into stores, actions, and reducers, promoting a predictable state flow.

Features/Counter/CounterState.cs
public record CounterState { public int Count { get; init; } = 0; }

Features/Counter/CounterActions.cs
public record IncrementCounterAction;

Features/Counter/CounterReducers.cs
public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState ReduceIncrementCounterAction(CounterState state, IncrementCounterAction action)
        => state with { Count = state.Count + 1 };
}

MyComponent.razor
@inject IDispatcher Dispatcher
@inject IState CounterState

Fluxor Count: @CounterState.Value.Count

    Increment Fluxor Count

                

Choosing the Right Approach

The best state management strategy depends on the complexity and specific needs of your Blazor application. Start with the simplest approach that meets your requirements and refactor to more advanced patterns as complexity grows.