State Management in Blazor Webassembly

October 29, 2024

Managing State in Blazor WebAssembly (WASM)

Managing state in Blazor WebAssembly (WASM) is essential for creating dynamic, interactive web applications. This guide explores the fundamentals of Blazor WebAssembly state management, demonstrating the concepts with practical examples. By the end of this article, you will have a thorough understanding of how to implement Blazor state management effectively.

What is State Management?

State management refers to the techniques used to handle the state of an application. In the context of Blazor WebAssembly, it involves managing the state of various components and ensuring they update correctly when the state changes. Effective state management is critical for creating responsive and user-friendly applications.

Why is State Management Important in Blazor WebAssembly?

Blazor WebAssembly is a single-page application (SPA) framework that loads a single HTML page and dynamically updates it as the user interacts with the app. Proper Blazor WebAssembly state management ensures that changes in the application state are reflected accurately across all relevant components, enhancing the user experience.

Methods of State Management in Blazor

There are several ways to manage state in Blazor, including:

Local State: State contained within a single component.
Cascading Parameters: State passed down the component hierarchy.
Dependency Injection (DI): State shared across components using DI services.
State Container: A service dedicated to managing and notifying state changes.

Example: Implementing a State Container Service

Let’s walk through a step-by-step process of creating and using a state container service in Blazor WebAssembly.

Step 1: Create the State Container Service

First, create a new class named StateContainerService.


    public class StateContainerService
    {
        public int Value { get; set; } = 0;

        public event Action OnStateChange;

        public void SetValue(int value)
        {
            Value = value;
            NotifyStateChanged();
        }

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

This service maintains a state (Value) and notifies subscribers when the state changes.

Step 2: Register the Service

Next, register the StateContainerService in the Startup.cs or Program.cs file, depending on your Blazor application type:


    builder.Services.AddScoped<StateContainerService>();

Step 3: Inject the Service into a Component

Inject the StateContainerService into a Blazor component where you want to manage the state. For example, let’s create a counter component:


    @page "/counter"
    @inject StateContainerService StateContainer

    <h3>Counter</h3>
    <p>Current count: @StateContainer.Value</p>
    <button @onclick="IncrementCount">Increment</button>

    @code {
        private void IncrementCount()
        {
            StateContainer.SetValue(StateContainer.Value + 1);
        }

        protected override void OnInitialized()
        {
            StateContainer.OnStateChange += StateHasChanged;
        }

        public void Dispose()
        {
            StateContainer.OnStateChange -= StateHasChanged;
        }
    }

You can inject the same StateContainerService into other components to share and update the state. For instance, create another component that displays the current count:


    @page "/display"
    @inject StateContainerService StateContainer

    <h3>Display Count</h3>
    <p>Current count: @StateContainer.Value</p>

    @code {
        protected override void OnInitialized()
        {
            StateContainer.OnStateChange += StateHasChanged;
        }

        public void Dispose()
        {
            StateContainer.OnStateChange -= StateHasChanged;
        }
    }

Step 5: Run the Application

Run your Blazor WebAssembly application and navigate to the /counter page. Click the “Increment” button to increase the count. Then, navigate to the /display page to see the updated count.

Advanced State Management: Blazor Global State Management

For more complex applications, you may need Blazor global state management to manage state across multiple components and services. This can be achieved by creating a singleton service that holds the global state.

Step 6: Implement Global State Management

Modify the StateContainerService to be a singleton and include logic for global state management:


    public class StateContainerService
    {
        public int Value { get; set; } = 0;
        public event Action OnStateChange;

        public void SetValue(int value)
        {
            Value = value;
            NotifyStateChanged();
        }

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


    builder.Services.AddSingleton<StateContainerService>();

Inject the service into any component that requires access to the global state:


    @page "/global"
    @inject StateContainerService StateContainer

    <h3>Global State</h3>
    <p>Current count: @StateContainer.Value</p>
    <button @onclick="IncrementCount">Increment</button>

    @code {
        private void IncrementCount()
        {
            StateContainer.SetValue(StateContainer.Value + 1);
        }

        protected override void OnInitialized()
        {
            StateContainer.OnStateChange += StateHasChanged;
        }

        public void Dispose()
        {
            StateContainer.OnStateChange -= StateHasChanged;
        }
    }

Conclusion

State management is a fundamental aspect of building responsive Blazor WebAssembly applications. By using a state container service and implementing Blazor global state management, you can effectively manage and share state across multiple components. This guide provided a step-by-step approach to implementing state management in Blazor, helping you build dynamic and interactive web applications.