Exception while using fluxor

Question

I am trying to use Fluxor in my Blazor WebAssebly app.

I have:

• builder.Services.AddFluxor(options => options.ScanAssemblies(typeof(Program).Assembly)); in Program.cs
• <Fluxor.Blazor.Web.StoreInitializer/> in App.razor
• <script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script> in index.html

...and it works fine. But when I add the following file to project:

// path: MyApp.Frontend/Stores/CounterStore.cs

using Fluxor;

namespace MyApp.Frontend.Stores;

[FeatureState]
public class CounterState
{
    public int Count { get; init; }
}

public class CounterFeature : Feature<CounterState>
{
    public override string GetName() => "Counter";

    protected override CounterState GetInitialState()
    {
        return new CounterState
        {
            Count = 0
        };
    }
}

public class IncrementCounterAction
{
}

public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState ReduceIncrementCounterAction(CounterState state, IncrementCounterAction action)
    {
        return new CounterState
        {
            Count = state.Count + 1
        };
    }
}

i get an exception:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: An item with the same key has already been added. Key: MyApp.Frontend.Stores.CounterState

What i have tried:

• moving each class into separate file
• using record instead of CounerState class

Other info:

• .NET SDK version: 7.0.100
• Fluxor.Blazor.Web package version: 5.7.0
• Browser: Firefox 109.0.1 / Edge 109.0.1518.70
• IDE: Rider 2022.3.1
• OS: Windows 11 64-bit

How can i fix this?

Answer 1

Looks like removing FeatureStateAttribute solved the problem.