Add Redux Dev Tools to your project
ReduxDevTools are a chrome extension that let you view the Action
s and State
before and after each Action
is handled.
This is quite handy for debugging.
Enable in Blazor-State
Warning
Redux Dev Tools should NOT be enabled in production.
Redux Dev Tools are disabled by default. Update the options passed to the AddBlazorState
extension method to set UseReduxDevToolsBehavior
to true, as show here in the sample application:
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Sample.Client;
using System.Reflection;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddBlazorState
(
options =>
{
options.UseReduxDevTools();
options.Assemblies =
new Assembly[]
{
typeof(Program).GetTypeInfo().Assembly,
};
}
);
await builder.Build().RunAsync();
Initialize in App Component
ReduxDevTools requires Javascript interop. Similar to Routing and Javascript interop one must inject and initialize ReduxDevToolsInterop
in the base Application component.
See example from the sample app below:
namespace Sample.Client;
using System.Threading.Tasks;
using TimeWarp.Features.ReduxDevTools;
using TimeWarp.Features.JavaScriptInterop;
using TimeWarp.Features.Routing;
using Microsoft.AspNetCore.Components;
public partial class App : ComponentBase
{
[Inject] private JsonRequestHandler JsonRequestHandler { get; set; } = null!;
[Inject] private ReduxDevToolsInterop ReduxDevToolsInterop { get; set; } = null!;
[Inject]
[System.Diagnostics.CodeAnalysis.SuppressMessage
(
"CodeQuality",
"IDE0051:Remove unused private members",
Justification = "It is used, the constructor has side effects "
)
]
private TimeWarpNavigationManager TimeWarpNavigationManager { get; set; } = null!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
// TODO:
throw new Exception("do I hit?");
await ReduxDevToolsInterop.InitAsync();
await JsonRequestHandler.InitAsync();
}
}
Now run your app and Open the Redux Dev Tools and you should see Actions as they are executed.