AugusteVN.Razor.State 1.0.9

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 : StateProvider
{
    private readonly HttpClient _http;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState) : base(appState)
    {
        _http = http;
    }
    
    public async Task<BlogPostResponse?> FetchSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        return await FetchAsync<BlogPostResponse?>(
            key: $"{nameof(GetBlogPostForSlug)}/{request.Slug}",
            fetchMethod: () => 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;
        }
    }
    
}

Inheritance

builder.Services.AddSingleton<StateProvider>();

public class BlogHttpClient
{
    private readonly HttpClient _http;
    private readonly PersistentComponentState _appState;
    private readonly StateProvider _stateProvider;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState, StateProvider stateProvider)
    {
        _http = http;
        _appState = appState;
        _stateProvider = stateProvider;
    }
    
    public async Task<BlogPostResponse?> FetchSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        return await stateProvider.FetchAsync<BlogPostResponse?>(
            _appState,
            key: $"{nameof(GetBlogPostForSlug)}/{request.Slug}",
            fetchMethod: () => 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;
        }
    }
}

INotifyPropertyChanged

Notify whenever the value of a property in our global state changes.

public class BlogHttpClient : StateProvider
{
    private BlogPostResponse? _selectedBlogPost;
    public BlogPostResponse? SelectedBlogPost {
        get => _selectedBlogPost;
        set => SetField(ref _selectedBlogPost, value);
    }
    
    private readonly HttpClient _http;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState) : base(appState)
    {
        _http = http;
    }
    
    public async Task InitSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        SelectedBlogPost = await FetchAsync<BlogPostResponse?>(
            key: $"{nameof(GetBlogPostForSlug)}/{request.Slug}",
            fetchMethod: () => 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;
        }
    }
    
}

ExampleComponent.razor

@implements IDisposable
@inject BlogHttpClient BlogHttpClient

@code {
    protected override void OnInitialized()
    {
        BlogHttpClient.PropertyChanged += HandleStateChanged;
    }

    private void HandleStateChanged(object? sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(BlogHttpClient.SelectedBlogPost))
        {
            Console.WriteLine(BlogHttpClient.SelectedBlogPost.Title);
        }
    }

    public void Dispose()
    {
        State.PropertyChanged -= HandleStateChanged;
    }
}

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

Brought to you by: kiss-code.com.