Skip to content

Latest commit

 

History

History
53 lines (47 loc) · 2.35 KB

README.md

File metadata and controls

53 lines (47 loc) · 2.35 KB
Raw

ClientWithVanillaFluxor

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

Prerequisites

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>