使用Blazor(WASM)的MediatR通知-事件处理程序不会更新UI

时间:2020-10-14 10:44:40

标签: blazor blazor-client-side blazor-webassembly mediatr asp.net-blazor

我试图仅在客户端Blazor应用程序中连接MediatR,以处理组件之间的事件通知。

事件已发布,并由具有处理程序的单独组件处理,但我无法从处理程序更新UI。

我认为原因是MediatR调用的处理程序与UI组件所使用的处理程序不同。如果说得通?

有人在Blazor中使用MediatR通知吗?

发布组件:

@inject MediatR.IMediator _mediator

<h3>Sender</h3>

<button @onclick="SendNotification">Send notification</button>

@code {

    private void SendNotification()
    {
        _mediator.Publish(new MyNotification { Message = "Hello World!" });
    }

}

订阅组件:

@using MediatR;
@implements INotificationHandler<MyNotification>;

<h3>Receiver</h3>

<p>Message: @Message</p>

@code {

    private string Message { get; set; } = "[No message]";

    public Task Handle(MyNotification notification, System.Threading.CancellationToken cancellationToken)
    {
        Message = notification.Message; // <-- THIS DOES NOT UPDATE THE UI

        return Task.CompletedTask;
    }

}

通知:

public class MyNotification : INotification
{
    public string Message { get; set; }
}

主要:

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");

    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    builder.Services.AddMediatR(typeof(Program));

    await builder.Build().RunAsync();
}

1 个答案:

答案 0 :(得分:0)

这个想法是,您的 Blazor 应用程序应该侦听 MediatR 命令并在发生这种情况后更新 UI 组件。为此,您需要:

  1. 注意由 MediatR 处理程序触发的 state management 事件。
  2. 使您的 Blazor 组件订阅此事件并使用 StateHasChanged 刷新 UI - 您可以在 3 Ways to Communicate Between Components in Blazor 文章中看到“状态容器”示例。