AppState Pattern in .NET and Blazor — Efficient State Management for Modern Applications

Posted by:

Rob Hutton

|

On:

|

, ,
, , ,

State management is a critical part of building modern applications. Whether you’re developing a web, desktop, or mobile application, managing shared state efficiently can improve maintainability, performance, and user experience. One of the effective ways to manage shared state in .NET applications, particularly in Blazor, is by using the AppState pattern. This article delves into the AppState pattern, its benefits, its alignment with SOLID principles and Clean Architecture, as well as a concrete example.

AppState Pattern

The AppState pattern revolves around creating a centralized state container that holds shared data and provides a mechanism for notifying components when state changes occur. It is particularly useful when multiple components need access to the same state while ensuring the UI updates correctly when that state changes.

Benefits

  • Centralized State Management: Reduces redundant state variables across multiple components.
  • Automatic UI Updates: Uses event-driven notifications to trigger UI refreshes.
  • Decoupled Components: Promotes loose coupling between components, making the application more maintainable.
  • Improved Performance: Reduces unnecessary re-renders by updating only the necessary parts of the UI.
  • Better Testability: Encourages separation of concerns, making unit testing more effective.

SOLID Principles

  • Single Responsibility Principle (SRP): AppState isolates state management, separating it from UI logic.
  • Open-Closed Principle (OCP): The pattern allows extensions without modifying existing components.
  • Liskov Substitution Principle (LSP): Components using the AppState pattern can be replaced or extended without altering expected behavior.
  • Interface Segregation Principle (ISP): Ensures components only depend on the parts of the state they need.
  • Dependency Inversion Principle (DIP): Promotes dependency injection by making state management services injectable.

Clean Architecture

In Clean Architecture, we aim to separate concerns into layers:

  • Presentation Layer (UI Components): Consumes AppState to display data.
  • Application Layer: Implements business logic using AppState.
  • Infrastructure Layer: Uses repositories and services to fetch and persist data.

By implementing AppState in the application layer, we maintain a clean separation between the UI and data access, ensuring better scalability and maintainability.

Microsoft AppState Pattern Usage

Microsoft employs similar state management concepts across its ecosystem:

  • Blazor: Uses INotifyPropertyChanged or state containers to manage UI state.
  • ASP.NET Core: Implements dependency injection to handle shared services.
  • .NET MAUI/WPF: Uses MVVM with stateful services for UI state binding.

AppState Pattern Implementation

Imagine you’re building an Employee Management Dashboard where multiple components (Employee List, Employee Details, and Notifications) share the same employee state.

The AppState pattern centralizes shared data, allowing multiple components to access and update it without passing data manually. In the Employee Management Dashboard example, instead of passing employee data between components like Employee List, Employee Details, and Notifications, the data is stored in a central AppState service. When an employee is selected, the AppState service updates the state, and all components automatically reflect the change, ensuring consistency and reducing complexity.

1️⃣ Create an AppState Service

This code defines an AppState class that manages the SelectedEmployee state and notifies other components when it changes. This approach decouples components and supports data-binding, enabling automatic UI updates.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;

public class AppState : INotifyPropertyChanged
{
    private Employee _selectedEmployee;
    public Employee SelectedEmployee
    {
        get => _selectedEmployee;
        set
        {
            if (_selectedEmployee != value)
            {
                _selectedEmployee = value;
                OnPropertyChanged(nameof(SelectedEmployee));
            }
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
  • The SelectedEmployee property checks if the selected employee has changed. If it has, it updates the private field and triggers the PropertyChanged event.
  • INotifyPropertyChanged is implemented to notify UI components when the property changes, ensuring automatic updates.
  • The OnPropertyChanged method triggers the event, allowing subscribed components to react and update accordingly.

2️⃣ Register AppState as a Singleton in DI

In Program.cs, register AppState as a singleton. This ensures a single shared instance across components, preventing inconsistencies and ensuring that all components are working with the same data, which is crucial for maintaining synchronized state across the application.

builder.Services.AddSingleton<AppState>();

3️⃣ Use AppState in Components

This approach makes the employee selection logic more manageable and centralized. By updating the AppState with the selected employee, other components that subscribe to this state can react and display the updated employee information without needing to pass data manually between components.

✨Employee List Component (EmployeeList.razor)

This code is part of a Blazor component that displays a list of employees and allows the user to select one.

@inject AppState AppState

@foreach (var employee in Employees)
{
    <button @onclick="() => SelectEmployee(employee)">@employee.Name</button>
}

@code {
    private List<Employee> Employees = new() {
        new Employee { Id = 1, Name = "Alice" },
        new Employee { Id = 2, Name = "Bob" }
    };

    private void SelectEmployee(Employee employee)
    {
        AppState.SelectedEmployee = employee;
    }
}
  • Displays a list of employees.
  • Updates AppState.SelectedEmployee when a user clicks an employee.

✨Employee Details Component (EmployeeDetails.razor)

This code is part of a Blazor component that displays the name of the selected employee and updates the UI when the selection changes.

@inject AppState AppState

<h3>Selected Employee: @AppState.SelectedEmployee?.Name</h3>

@code {
    protected override void OnInitialized()
    {
        AppState.PropertyChanged += (sender, args) => StateHasChanged();
    }
}
  • @inject AppState AppState: Injects the AppState service, providing access to the shared selected employee state.
  • <h3>Selected Employee: @AppState.SelectedEmployee?.Name</h3>: Displays the name of the selected employee, using a null-conditional operator to avoid errors if no employee is selected.
  • protected override void OnInitialized(): Subscribes to the AppState.PropertyChanged event to trigger UI updates when the SelectedEmployee changes.
  • AppState.PropertyChanged += (sender, args) => StateHasChanged();: Calls StateHasChanged() to re-render the component when the selected employee is updated in AppState.

Handling State Persistence

To persist the state across app reloads or page refreshes, you can store the selected state in a local storage or a database repository. This ensures that even if the user leaves the page and returns later, the state (e.g., selected employee) is maintained.

In a Blazor application, local storage is commonly used to persist state on the client side. This can be particularly useful in scenarios like saving a user’s selections or preferences that should remain intact when the user navigates away or refreshes the page.

Using Local Storage for Persistence

Blazor provides a localStorage API (via JavaScript interop) to store data in the browser’s local storage. You can implement state persistence by saving and retrieving the selected employee’s ID in local storage.

This pattern ensures that the app retains important user data (e.g., selected employee) even after a page reload, improving user experience. Local storage is lightweight and convenient for smaller, client-side state persistence. However, for more complex or sensitive data, you may want to use a server-side solution or a more robust storage mechanism like a database.

1️⃣ Create a Service to Manage State Persistence

You can create a service to handle saving and loading state from local storage. This service will interact with the AppState and local storage to persist the selected employee.

using Microsoft.JSInterop;
using System.Threading.Tasks;

public class StatePersistenceService
{
    private readonly IJSRuntime _jsRuntime;

    public StatePersistenceService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task SaveSelectedEmployeeAsync(Employee employee)
    {
        if (employee != null)
        {
            await _jsRuntime.InvokeVoidAsync("localStorage.setItem", "selectedEmployeeId", employee.Id);
        }
    }

    public async Task<Employee> LoadSelectedEmployeeAsync()
    {
        var employeeId = await _jsRuntime.InvokeAsync<int?>("localStorage.getItem", "selectedEmployeeId");
        return employeeId.HasValue ? new Employee { Id = employeeId.Value } : null;
    }
}
  • SaveSelectedEmployeeAsync: Saves the selected employee’s ID in local storage.
  • LoadSelectedEmployeeAsync: Retrieves the selected employee’s ID from local storage and returns an Employee object.

2️⃣ Register the Persistence Service

In Program.cs, register the persistence service:

builder.Services.AddSingleton<StatePersistenceService>();

3️⃣ Modify AppState to Handle State Persistence

Modify the AppState class to use StatePersistenceService for loading and saving the selected employee.

public class AppState : INotifyPropertyChanged
{
    private readonly StatePersistenceService _statePersistenceService;

    private Employee _selectedEmployee;
    public Employee SelectedEmployee
    {
        get => _selectedEmployee;
        set
        {
            if (_selectedEmployee != value)
            {
                _selectedEmployee = value;
                OnPropertyChanged(nameof(SelectedEmployee));
                _statePersistenceService.SaveSelectedEmployeeAsync(_selectedEmployee);
            }
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    public AppState(StatePersistenceService statePersistenceService)
    {
        _statePersistenceService = statePersistenceService;
    }

    public async Task LoadStateAsync()
    {
        var employee = await _statePersistenceService.LoadSelectedEmployeeAsync();
        SelectedEmployee = employee;
    }

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
  • The AppState class now depends on StatePersistenceService to load and save the selected employee’s state.
  • The SelectedEmployee property automatically persists the state when it changes.
  • A LoadStateAsync method is added to load the saved employee state when the app is initialized.

4️⃣ Load the State on Component Initialization

Finally, in your Blazor component, load the state during initialization.

@inject AppState AppState

<h3>Selected Employee: @AppState.SelectedEmployee?.Name</h3>

@code {
    protected override async Task OnInitializedAsync()
    {
        await AppState.LoadStateAsync();
    }
}
  • When the component initializes, the LoadStateAsync method is called to check if there’s a saved SelectedEmployee in local storage.
  • If there is a saved employee, it’s loaded into the AppState, ensuring the selected employee persists across page reloads.

The AppState pattern in .NET provides a structured, scalable, and maintainable way to handle shared state across components. It aligns with SOLID principles, supports Clean Architecture, and enhances UI responsiveness. By implementing this pattern, developers can improve state management efficiency and reduce unnecessary component dependencies, ultimately leading to cleaner and more maintainable applications.

Posted by

Rob Hutton

in

, ,