AugusteVN.Razor.State 1.0.1

State management in Blazor / Razor

Helper classes and components for state management in Blazor / Razor.

Persist Component State

Blazor has an unfortunate double rendering issue when pre-rendering is enabled. The PesistState.cs helps prevent double HTTP calls that occur on the component's lifecycle methods which get triggered twice.

Usage Example

public class BlogHttpClient
{
    private readonly HttpClient _http;
    private readonly PersistentComponentState _appState;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState)
    {
        _http = http;
        _appState = appState;
    }
    
    public async Task<BlogPostResponse?> FetchSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        using var persistState = new PersistState<BlogPostResponse?>(_appState, nameof(GetBlogPostForSlug));
        return await persistState.Fetch(() => GetBlogPostForSlug(request));
    }

    private async Task<BlogPostResponse?> GetBlogPostForSlug(GetBlogPostForSlugRequest request)
    {
        try
        {
            return await _http.GetFromJsonAsync<BlogPostResponse>($"{ApiRoutes.BlogPosts}/{request.Slug}");
        }
        catch (Exception e)
        {
            _logger.LogWarning("Could not get blog post with slug: {slug}, {@errorMessage}", request.Slug, e.Message);
            return null;
        }
    }

To see it in action, watch: Prevent this Blazor Prerendering ISSUE C# .NET 8.

Brought to you by: kiss-code.com.