Coder Legion - Recent posts tagged state

Clean Async State Management with Pinia Colada

Sat, 05 Jul 2025 08:33:04 +0000

Managing async state—think loading spinners, error handling, stale data—is notoriously messy. If you’ve wrestled with nested subscriptions or redundant fetch logic in Vue+Pinia apps, Pinia Colada might be the game-changer you need.

What Is Pinia Colada?

Pinia Colada is a powerful data-fetching layer built on top of Pinia. It eliminates boilerplate by providing:

Automatic caching and deduplication
Smart query invalidation
Declarative API for queries (data fetches) and mutations
Support for optimistic updates, SSR, and tree-shaken size of \~2 KB

Quick Start

npm install pinia @pinia/colada

Then in your Vue app setup:

import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'

app.use(createPinia())
app.use(PiniaColada, {/* optional plugins */})

Now you’re ready to use useQuery and useMutation everywhere.

Example: Querying Data

Instead of manual loading flags, error state, and fetch logic:

const { data, error, isPending, isLoading, refresh } = useQuery({
  key: ['users'],
  query: fetchUsers,
})

Then in the template, you can declaratively handle the three states:

isPending — first fetch
isLoading — refreshes
error — if broken
data — once resolved

Mutations & Invalidation

const { mutate: addComment, isLoading } = useMutation({
  mutation: postComment,
  onSettled: async ({ id }) => {
    await queryCache.invalidateQueries({ key: ['comments', id], exact: true })
  }
})

This lets you optimistically update and ensure fresh data before closing modal dialogs or user notifications.

Why You’ll Love It

Minimal state boilerplate: No more juggling isLoading, isError, and data manually.
Built-in caching and deduplication for better UX and efficiency.
Fully typed, tree-shakeable, zero deps (besides Pinia), and SSR-ready.
Plugins like autoRefetch and delay help avoid flickers or stale data.

Real-World Feedback

Reddit users highlight Pinia Colada's advantage for API-driven state:

“This is what Pinia stores call service methods… API calls inside sweet local store. It’s perfect to avoid multiple fetches.”

Others note:

“Pinia is for global app state. For API caching use Tanstack Query… Pinia Colada consolidates the conundrum.”

TL;DR – When to Use It

Use Pinia Colada when:

You want clean, reusable logic for API calls
You care about efficient caching and UX consistency
You prefer declarative state over imperative patterns
You work with mutable server data and want stale-data control

Want to Go Further?

Explore optimistic updates, SSR support, and GraphQL usage
Combine with Vue Router Data Loaders and modular async handling
Try plugins like auto-refetch and delay to polish UX

Pinia Colada brings a modern, well-structured approach to async state in Vue apps—cutting boilerplate, reducing bugs, and improving developer happiness. Whether it's simple CRUD or complex dialogs or pagination, it's well worth a look.

State Management Made Easy with Fluxor in Blazor

Fri, 25 Apr 2025 12:59:35 +0000

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

List item