For large applications, simple AppState services can become hard to manage. Fluxor is a popular Redux/Flux-inspired state management library for Blazor that brings unidirectional data flow.

Core Concepts

• State — immutable data objects representing a slice of app state
• Action — a plain class representing intent to change state
• Reducer — a pure function returning new state from current state + action
• Effect — handles async side effects (API calls) triggered by actions

Setup

// Install: dotnet add package Fluxor.Blazor.Web
builder.Services.AddFluxor(o =>
    o.ScanAssemblies(typeof(Program).Assembly));

// App.razor:
<Fluxor.Blazor.Web.StoreInitializer />

State and Reducer

[FeatureState]
public record CounterState(int Count);

public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState OnIncrement(
        CounterState state, IncrementAction action)
        => state with { Count = state.Count + 1 };
}

Using in a Component

@inject IState<CounterState> CounterState
@inject IDispatcher Dispatcher

<p>Count: @CounterState.Value.Count</p>
<button @onclick="() => Dispatcher.Dispatch(new IncrementAction())">+</button>

Reference:

Wikipedia: Flux Architecture

https://en.wikipedia.org/wiki/State_management