ReactiveCommand with CommandParameter not working?

[jcummings2]

Does the CommandParameter for a ReactiveCommand get passed to the Execute method?

The only mention I see of it in connection with R3 is in closed issue #281. I'm not sure what UI framework was being used in that issue but the discussion implies that the CommandParameter should work. However, I have been unable to get a parameter to be passed in Avalonia and WPF.

I modified the sandbox/WpfApp1 example from the repository (based on commit 5acafe7) to make it as simple as possible. Here is the ViewModel:

public class CommandViewModel : IDisposable
{
    public BindableReactiveProperty<bool> OnCheck { get; }
    public ReactiveCommand ShowMessageBox { get; }
    public ReactiveCommand<string, Unit> ShowMessageBoxWithParameter { get; }

    public CommandViewModel()
    {
        OnCheck = new BindableReactiveProperty<bool>();
        ShowMessageBox = OnCheck.ToReactiveCommand(_ =>
        {
            MessageBox.Show("clicked");
        });
        ShowMessageBoxWithParameter = new(
            canExecuteSource: OnCheck,
            initialCanExecute: false,
            convert: (msg) =>
            {
                MessageBox.Show($"CommandParameter is {msg}");
                return Unit.Default;
            }
        );
    }

    public void Dispose()
    {
        Disposable.Dispose(OnCheck, ShowMessageBox);
    }
}
 

and the relevant portion of the XAML:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:CommandViewModel />
    </Window.DataContext>

    <StackPanel Margin="10">
        <Label Content="Command" />
        <CheckBox IsChecked="{Binding OnCheck.Value}" />
        <Button Content="Btn" Command="{Binding ShowMessageBox}" />
        <Button Content="Btn With CommandParameter" Command="{Binding ShowMessageBoxWithParameter}" CommandParameter="Passed value" />
    </StackPanel>
</Window>

As you would expect, both buttons are enabled when the checkbox is checked. The first or original button displays a messages box as before. The second button can be pressed but nothing happens. A breakpoint set in the convert lambda never gets hit. What do I need to do for it to work?

[jcummings2]

Here is a screencast showing that the second button does not work:

[jcummings2]

After debugging, I found a workaround. Adding

ShowMessageBoxWithParameter.Subscribe();

after creating the ReactiveCommand<string.Unit> makes the Func<string, Unit> passed as convert actually run and the parameter is also passed. Of course, there is a leak with the IDisposable that is returned.

[jcummings2]

I wondered why I did not have to explicitiy Subscribe() to the original ShowMessageBox and then when digging into the code discovered that ToReactiveCommand does it for you. In fact, it seems the base ReactiveCommand<Unit> doesn't actually keep track of its own Action that is optionally passed to one of the constructors as execute. I learned this detail when I tried to create ShowMessageBox directly via a constructor and learned there is not one that accepts an Observable<bool> for canExecuteSource (and a bool for initialCanExecute) and also an Action<T> for execute. It seems such functionality is only accessible via the ToReactiveCommand() extension method.

The ToReactiveCommand() extension method makes use of the enigmatic ReactiveCommand<T>.CombineSubscription(IDisposable) method. I say enigmatic because given my background in other libraries I do not think of ReactiveCommand as first a derived Observable<T> but that is the case in R3.

As for ReactiveCommand<TInput, TOutput> that is used in my example above, it does keep track of its execute type Func though it is called convert or convertAsync depending on synchronous or synchronous usage pattern. The names of those variables are more understandable when remembering that ReactiveCommand<TInput, TOutput> is derived from Observable<TOutput> though I personally find the names a bit confusing given my background. In any case, ReactiveCommand<TInput, TOutput> does NOT have a CombineSubscription(IDisposable). As such even the asynchronous usage version of ToReactiveCommand cannot call it and so likely has the same trouble (will test later).

In summary, there seems to be missing functionality in ReactiveCommand<TInput, TOutput> with regard to managing subscriptions.

[jcummings2]

As for ReactiveCommand<TInput, TOutput> that is used in my example above, it does keep track of its execute type Func though it is called convert or convertAsync depending on synchronous or synchronous usage pattern. The names of those variables are more understandable when remembering that ReactiveCommand<TInput, TOutput> is derived from Observable<TOutput> though I personally find the names a bit confusing given my background. In any case, ReactiveCommand<TInput, TOutput> does NOT have a CombineSubscription(IDisposable). As such even the asynchronous usage version of ToReactiveCommand cannot call it and so likely has the same trouble (will test later).

In summary, there seems to be missing functionality in ReactiveCommand<TInput, TOutput> with regard to managing subscriptions.

I have confirmed that the asynchronous version of ReactiveCommand<TInput, TOutput> also has the same issue when using either the constructor with the convertAsync parameter or the ToReactiveCommand extension method on Observable<bool>. As such, an explicit Subscribe() call is required for it to work. The returned IDisposable from that call will need to be handled correctly.

For completeness here is the somewhat contrived usage:

        // using the extension method
        ShowMessageBoxWithParameterAsync = OnCheck.ToReactiveCommand<string, Unit>(async (msg, ct) =>
        {
            await Task.Run(() =>
            {
                MessageBox.Show($"In Async CommandParameter is {msg}");
            }, ct);
            return Unit.Default;
        });

        // or using the constructor instead
        ShowMessageBoxWithParameterAsync = new(
            canExecuteSource: OnCheck,
            initialCanExecute: false,
            convertAsync: async (msg, ct) =>
            {
                await Task.Run(() =>
                {
                    MessageBox.Show($"In Async CommandParameter is {msg}");
                }, ct);
                return Unit.Default;
            }
        );

        // both require an explicit call to Subscribe or they do not work
        var diposableToBeHandled = ShowMessageBoxWithParameterAsync.Subscribe();