Exploring Actions, Effects, and the Benefits of Fluxor
Modern web applications are becoming increasingly complex, and with complexity comes the need for structured state management. In the world of Blazor a popular .NET-based web UI framework .
Fluxor offers a powerful yet easy-to-understand state container that brings predictable state flow to your applications.
Fluxor is a zero-boilerplate Flux/Redux library for Microsoft .NET.
It brings the same clean architecture and unidirectional data flow popularized by Redux in the JavaScript ecosystem—adapted for C# developers building with Blazor.
We’ll break down the core concepts of Fluxor and show how you can use Actions, Reducers, and Effects to create a clean, maintainable architecture.
Explore the GitHub project
️ What is Fluxor?
Fluxor provides a structured and predictable way to manage state in your Blazor application. Inspired by Redux, it embraces:
Unidirectional data flow — State changes follow a clear path: Action ➝ Reducer ➝ State ➝ UI.
Single source of truth — All application state lives in a centralized, immutable store.
Middleware & Effects — Separate side-effects like API calls from your UI and business logic.
Unlike some Redux implementations, Fluxor handles a lot of the boilerplate for you with C#-friendly conventions and strong typing.
Actions – Declaring Intent
In both Redux and Fluxor, Actions are plain messages that describe what happened. They're just
signals , they don’t contain logic.
Example:
public record FetchItemsAction;
public record FetchItemsSuccessAction(List<Item> Items);
public record FetchItemsFailedAction(string ErrorMessage);
⚙️ Effects – Handling Side Effects
Since Reducers must be pure, Effects in Fluxor allow you to perform async operations like API calls without cluttering your UI.
Example:
public class ItemEffects
{
[EffectMethod]
public async Task HandleFetchItems(FetchItemsAction action, IDispatcher dispatcher)
{
try
{
var items = await itemService.GetItemsAsync();
dispatcher.Dispatch(new FetchItemsSuccessAction(items));
}
catch (Exception ex)
{
dispatcher.Dispatch(new FetchItemsFailedAction(ex.Message));
}
}
}
This Effect reacts to FetchItemsAction and handles fetching data from an external service.
State and Reducers – Updating the Store
Reducers are responsible for updating state in response to actions. They are pure functions and return a new state based on the action received.
public static class ItemReducers
{
[ReducerMethod]
public static ItemState OnFetchSuccess(ItemState state, FetchItemsSuccessAction action) =>
state with { Items = action.Items, IsLoading = false };
[ReducerMethod]
public static ItemState OnFetchFailed(ItemState state, FetchItemsFailedAction action) =>
state with { ErrorMessage = action.ErrorMessage, IsLoading = false };
}
Reducers never mutate state—they return a new state object.
Try It Yourself
Check out the working example project to see all these concepts in action:
https://github.com/stevsharp/BlazorAndFluxorStateMachine
It demonstrates:
Dispatching Actions from UI
Handling async logic with Effects
Clean Reducer logic
Blazor component integration
✅ Why Use Fluxor?
No boilerplate overload – clean C# syntax
Clear, testable state transitions
Great for scaling large Blazor apps
Familiar to those who’ve used Redux in React or Angular
Keeps business logic and UI concerns separate
References
Fluxor GitHub Repository
Redux Official Site
Angular Redux
Blazor Documentation – Microsoft
BlazorAndFluxorStateMachine – GitHub Sample