MediatR Blazor wasm - notification target component not updating

[ghost]

.NET Standard 2.1 .NET Core 3.1.402 MediatR - 8.1.0

• Start with a clean Blazor WebAssembly project in VS 2019 (16.7.4) When the button is clicked I get the following error message in the browser (The render handle is not yet assigned):

  Publishing ping
  Got ping with data 'Clicked'
  updating
  System.InvalidOperationException: The render handle is not yet assigned.
  at Microsoft.AspNetCore.Components.RenderHandle.ThrowNotInitialized () <0x2ebe310 + 0x0000c> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderHandle.Render (Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x2bc4a60 + 0x0000a> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged () <0x2bc48a0 + 0x0004e> in <filename unknown>:0 
  at BlazorApp1.Components.Component2Base.Handle (BlazorApp1.Components.Ping notification, System.Threading.CancellationToken cancellationToken) [0x00035] in 

Program.cs

register MediatR in DI

builder.Services.AddMediatR(typeof(Program));

Component1.razor

Publish notification when button is clicked

@inherits Component1Base

<h3>Component1</h3>

<button type="button" @onclick="@ButtonClicked">Click me!</button>

Component1Base.cs

    public class Component1Base : ComponentBase
    {
        [Inject] 
        public IMediator Mediator { get; set; }

        protected Task ButtonClicked(EventArgs obj)
        {
            Console.WriteLine("Publishing ping");
            var ping = new Ping("Clicked");
            Mediator.Publish(ping);
            return Task.CompletedTask;
        }
    }

Component2.razor

Handle notification and try to update the value of the input

@inherits Component2Base

<h3>Component2</h3>

<EditForm Model="@Data">
    <InputText @bind-Value="@Data"></InputText>
</EditForm>

Component2Base.cs

    public class Component2Base : ComponentBase, INotificationHandler<Ping>
    {

        protected string Data { get; set; }

        protected override void OnInitialized()
        {
            Data = "1234";
        }

        public Task Handle(Ping notification, CancellationToken cancellationToken)
        {
            Console.WriteLine($"Got ping with data '{notification.Data}'");
            try
            {
                Console.WriteLine("updating");
                Data = notification.Data;
                StateHasChanged();
                Console.WriteLine("updated");
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
            return Task.CompletedTask;
        }
    }

Ping.cs

Notification class

public class Ping : INotification
    {
        public Ping(string data)
        {
            Data = data;
        }
        public string Data { get; }
    }

Index.razor

Use the 2 components

@page "/"
@using BlazorApp1.Components

<h1>Hello, world!</h1>

Welcome to your new app.

<Component1></Component1>
<Component2></Component2>

[lilasquared]

Likely the problem here is that you are using a single class for both the razor backend and the notification handler. The .AddServices() extension method registers the handlers as Transient, which creates a new instance of the class to handle the notification. That means the one that is being used in rendering is not the same instance as the one that is handling the notification. In order to share data between the handlers and the Razor components you will need a shared dependency that both can interact with. I don't know the details of the lifecycle of the Razor components though so you will have to work that out yourself.

[ryanbuening]

@orantwolinkme, if you solved this can you share your solution?

[KuraiAndras]

@ryanbuening I have created a library just for this, with it you can subscribe/unsubscribe to and from MediatR notifications through an ICourier interface: https://dev.azure.com/kandras9642/MediatR.Courier EDIT: this would be using it in Component2Base

    public class Component2Base : ComponentBase, IDisposable
    {

       [Inject] ICourier Courier { get;set; }
        protected string Data { get; set; }

        protected override void OnInitialized()
        {
            Data = "1234";
            Courier.Subscribe<Ping>(Handle);
        }

       public void Dispose()
       {
            Courier.UnSubscribe<Ping>(Handle);
       }

        public Task Handle(Ping notification, CancellationToken cancellationToken)
        {
            Console.WriteLine($"Got ping with data '{notification.Data}'");
            try
            {
                Console.WriteLine("updating");
                Data = notification.Data;
                StateHasChanged();
                Console.WriteLine("updated");
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
            return Task.CompletedTask;
        }
    }

[ryanbuening]

@KuraiAndras awesome, thanks for sharing.

[InsanePup]

@KuraiAndras I have a similar problem only with Blazor Server. Having wired up your package I am not able to capture the event. Could you help please?

Registration:

builder.Services
    .AddMediatR(Assembly.GetAssembly(typeof(Program))! ,Assembly.GetAssembly(typeof(SyncService))!)
    .AddCourier(Assembly.GetAssembly(typeof(Program))!, Assembly.GetAssembly(typeof(SyncService))!);

Blazor page summary:

@using MediatR.Courier
@inject ICourier _courier

protected override void OnInitialized()
{
    _courier.Subscribe<DataSyncResult<SalesOrder>>(Handle);
}

public Task Handle(DataSyncResult<SalesOrder> notification, CancellationToken cancellationToken)
{
    _messages.Add(notification.ToString());
    StateHasChanged();
    return Task.CompletedTask;
}

Where:

public class DataSyncResult<T> : INotification
{ ...

and down the stack... await _mediator.Publish(result, cancellationToken);

If I use Mediatr instead (with page implementing INotificationHandler<>), the Handle() method gets called but throws exception "The render handle is not yet assigned" which is why I am trying your suggestion.

[KuraiAndras]

@melmullen this should work, altough I did not try it with balzor server. Please open an issue at https://github.com/KuraiAndras/MediatR.Courier let's not discuss this here.