AugusteVN.Razor.State 1.0.2

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

Inheritance

public class BlogHttpClient : PersistStateProvider
{
    private readonly HttpClient _http;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState) : base(appState)
    {
        _http = http;
    }
    
    public async Task<BlogPostResponse?> FetchSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        return await Fetch<BlogPostResponse?>(nameof(GetBlogPostForSlug), () => 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;
        }
    }
    
}

Composition

public class BlogHttpClient
{
    private readonly HttpClient _http;
    private readonly PersistentComponentState _appState;
    private readonly PersistStateProvider _persistState;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState, PersistStateProvider persistState)
    {
        _http = http;
        _appState = appState;
        _persistState = persistState;
    }
    
    public async Task<BlogPostResponse?> FetchSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        return await persistState.Fetch<BlogPostResponse?>(_appState, nameof(GetBlogPostForSlug), () => 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.