Getting Started - EasyAppDev.Blazor.Store

Installation

Add the package to your Blazor project using the .NET CLI:

dotnet add package EasyAppDev.Blazor.Store

Requirements

Prerequisites

.NET 8.0 or higher
Blazor Server, WebAssembly, or Blazor Web App
Package size: Only 38 KB gzipped (less than 0.1% of your app)

Note for Blazor Server/Web App users

See Render Modes compatibility notes for information about DevTools and LocalStorage features in different render modes.

Quick Start

Follow these three simple steps to add state management to your Blazor application:

1

Define Your State

State is just a C# record with transformation methods. No actions, no reducers, no dispatch.

CounterState.cs

public record CounterState(int Count)
{
    public CounterState Increment() => this with { Count = Count + 1 };
    public CounterState Decrement() => this with { Count = Count - 1 };
    public CounterState Reset() => this with { Count = 0 };
}

Key Principle: Pure Functions

State methods use the with expression to create new state instances. This ensures immutability and predictable updates.

2

Register in Program.cs

Register your store with all features enabled using a single line:

Program.cs

// One-liner registration with all features
builder.Services.AddStoreWithUtilities(
    new CounterState(0),
    (store, sp) => store.WithDefaults(sp, "Counter"));

What does this do?

AddStoreWithUtilities() - Includes async helpers (debounce, throttle, cache, etc.)
WithDefaults() - Adds Redux DevTools, logging, and JSRuntime integration

3

Use in Components

Inherit from StoreComponent<TState> to get automatic reactivity:

Counter.razor

@page "/counter"
@inherits StoreComponent<CounterState>

<h1>@State.Count</h1>

<button @onclick="@(() => UpdateAsync(s => s.Increment()))">+</button>
<button @onclick="@(() => UpdateAsync(s => s.Decrement()))">-</button>
<button @onclick="@(() => UpdateAsync(s => s.Reset()))">Reset</button>

That's it!

No actions, no reducers, no dispatch. Inherit from StoreComponent<T> and call UpdateAsync(). The component automatically re-renders when state changes.