BlazorFocused 1.0.0-alpha1

BlazorFocused

Adding Reactive Programming and Flux Architecture to Blazor Components with Microsoft.Extensions.DependencyInjection

Register

Integrate basic store in Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();

    // initialized instance of the store's data
    var testClass = new TestClass { FieldOne = "Test" };

    // add store in DI
    services.AddStore(testClass);
}

Integrate store with reducers in Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();

    // initialized instance of the store's data
    var testClass = new TestClass { FieldOne = "Test" };

    // add store in DI
    serviceCollection.AddStore(testClass, builder =>
    {
        builder.RegisterReducer(new TestReducer());
    });
}

State

Retrieve static state value from store:

@inject IStore<TestClass> store;

...

store.GetState().FieldOne;

Retrieve state value and subscribe to store updates:

@inject IStore<TestClass> store;

...
TestClass currentState = default;

store.Subscribe((newState) => {
    // update state used in page
    currentState = newState;

    // inform blazor page to refresh with state update
    StateHasChanged();
});

Reducers

Subscribe to reduced value from store:

@inject IStore<TestClass> store;

...
TestClassSubset currentState = default;

store.Reduce<TestClassSubset>(reducedState =>
{
    currentState = reducedState;

    // inform blazor page to refresh with state update
    StateHasChanged();
});

Actions

Register custom actions

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();

    // initialized instance of the store's data
    var testClass = new TestClass { FieldOne = "Test" };

    // add store in DI
    serviceCollection.AddStore(testClass, builder =>
    {
        builder.RegisterAction(new TestAction());
    });
}

Execute actions to update store:

@inject IStore<TestClass> store;

...
TestClass currentState = default;

// call action to be committed
store.Dispatch<TestAction>();

store.Subscribe((newState) => {
    // update state used in page
    currentState = newState;

    // inform blazor page to refresh with state update
    StateHasChanged();
});