ClientWithVanillaFluxor

Implementing Redux pattern in Blazor WebAssembly using .NET 6 and Fluxor. You can also find the related YouTube video here.

Prerequisites

• .NET 6 SDK
• (Optional) Redux DevTools Chrome extension. Very handy to debug action dispatches and state changes.

Dependencies added

• Fluxor.Blazor.Web v5.4.0
• Fluxor.Blazor.Web.ReduxDevTools v5.4.0

F5 Experience

1. Go to this directory
2. Restore dependencies using

   dotnet restore

3. Run Blazor WebAssembly in watch mode.

   dotnet watch run

4. Your default browser should automatically opened for you. Navigate to the Counter page to see the example.

Important Installation Notes on Fluxor

As per Fluxor v5.4.0, Fluxor requires the following additional setup:

1. Store initialiser + DOM for the ReduxDevTool to look for in App.razor:

   <Fluxor.Blazor.Web.StoreInitializer/>

2. Fluxor initialisation in Program.cs

   builder.Services.AddFluxor(options =>
   {
    options
      .ScanAssemblies(typeof(Program).Assembly)
      .UseReduxDevTools();
   });

.NET 6 Minimal Hosting Model

.NET 6 introduces minimal hosting model which removes explicit class declaration from Program.cs.

The side effect is that we can no longer reference Program directly in the code to scan for assemblies. The following workaround can be applied to the .csproj file to enable referencing Program back as mentioned in this post in StackOverflow:

<ItemGroup>
   <!-- This exposes Program class in .NET 6 minimal hosting setup -->
   <InternalsVisibleTo Include="ClientWithVanillaFluxor" />
</ItemGroup>