かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

RxとReactivePropertyを使って、WPFでUnidirection Data Flowを実現するを真似してみた

ありがたいことに最近ReactivePropertyを勧めたら使い始めて頂けました。

qiita.com

このコードを大げさに書いたらどうなるかなぁというのでやってみました。 ということでModel部分。

なんかきっかけがあるタイミングで、インクリメントし続けるだけの奴。

class CounterProvider
{
    public IObservable<int> ObservableCounter { get; }

    public CounterProvider(IObservable<Unit> countupTrigger)
    {
        this.ObservableCounter = countupTrigger
            .Scan(0, (x, _) => x + 1);
    }
}

コマンドとReactiveProperty持った人。

class MainWindowViewModel
{
    public ReadOnlyReactiveProperty<int> Count { get; }
    public ReactiveCommand IncrmentCommand { get; }

    public MainWindowViewModel()
    {
        this.IncrmentCommand = new ReactiveCommand();
        var model = new CounterProvider(this.IncrmentCommand.ToUnit());
        this.Count = model.ObservableCounter
            .ToReadOnlyReactiveProperty();
    }
}

んで画面。

<Window x:Class="StreamApp.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:StreamApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <StackPanel>
        <Button Content="Count"
                Command="{Binding IncrmentCommand}"/>
        <TextBlock Text="{Binding Count.Value}" />
    </StackPanel>
</Window>

仰々しくやるならこんなイメージかな?どうだろう。 とりあえず、全部IOでつなぐようにしてみた。