mrpmorris / Fluxor

Fluxor is a zero boilerplate Flux/Redux library for Microsoft .NET and Blazor.
MIT License
1.22k stars 139 forks source link

Fluxor does not seem to work with the new .NET 8 Blazor Web App template #473

Closed janusqa closed 4 months ago

janusqa commented 4 months ago

I'm using the .net 8 Blazor Web App template which gives two projects one of which is the client, the other is the server project. I want to use Fluxor to manage client state in the client.

In the client project I have installed

Fluxor
Fluxor.Blazor.Web
Fluxor.Blazor.Web.ReduxDevTools

To program.cs, in client project, I've added

// Fluxor
builder.Services.AddFluxor(options =>
{
    options.ScanAssemblies(typeof(Program).Assembly);
    options.UseReduxDevTools(rdt => { rdt.Name = "BlazorStore"; });
});

The client package does not have a "App.razor" or "routes.razor" So I created a layout ClientLayout.razor in a /Layout folder I created on the client. I added an _Imports.razor to the /Pages folder on the client and in it and placed an @layout ClientLayout directive so that all routable components in /Pages will use this layout. At the top of the ClientLayout.razor, I've then placed the below.

<Fluxor.Blazor.Web.StoreInitializer />

Counter.razor will now use this ClientLayout and I hoped too the Store would be initialized since its in the root layout for the client part.

When navigating to that counter page this error is seen.

An unhandled exception occurred while processing the request.
InvalidOperationException: Cannot provide a value for property 'Store' on type 'Fluxor.Blazor.Web.StoreInitializer'. There is no registered service of type 'Fluxor.IStore'.

What is the idomatic pattern for the new Blazor Web App template with respect to Fluxor?

stagep commented 4 months ago

You are most likely getting the exception because of server side prerendering of your client side component. In your server project where you reference the ClientLayout component add the rendermode as follows:

<ClientLayout @rendermode="@(new InteractiveWebAssemblyRenderMode(false))" />

Note, if you are not referencing the ClientLayout in your server project then add it to the main layout in the server project to ensure that it is being instantiated which in turn instantiates the Fluxor store.

janusqa commented 4 months ago

@stagep thank you! I see we also have a similar thread so will close this one similar thread: https://github.com/mrpmorris/Fluxor/issues/459