彗星の状態管理

Comet is a .NET experiment inspired by Flutter and Swift UI for building cross-platform apps with C#.

Comet モデルビューの更新パターンの変更をThe Elm Architecture , Elmish , Fabulous など.MVUの主要な部分は以下の通りです.

モデル:アプリの状態

ビュー:ユーザーに表示される状態

UPDATE :メッセージ経由で状態を更新する方法

状態はほとんど常に不変であり、変更は単一の方向に流れます.


状態の定義
それぞれView 独自の状態があり、いくつかの方法で定義できます.最も簡単に使用することですState<T> 実装するクラスにフィールドをラップするにはINotifyPropertyRead .

readonly State<int> count = 0;

ほとんどのビューは、おそらくより複雑な状態を持つでしょう、そして、あなたは同じ方法でそれを表すことができます BindingObject を使用します.Cometプロジェクトテンプレートで確認できます.

public class CometRide : BindingObject
{
    public int Rides
    {
        get => GetProperty<int>();
        set => SetProperty(value);
    }

    public string CometTrain
    {
        get
        {
            return "☄️".Repeat(Rides);
        }
    }
}

現在View あなたはその単純なようにあなたの状態を宣言することができますint 最初の例では

readonly State<CometRide> comet = new();

これは古い彗星サンプルで見ることができるコードと等価です.

[State]
readonly CometRide comet = new();

ビューの状態の追加
コメットのすべてのUIはView , と[Body] ビューの構造を返すメソッドを注釈します.これは我々の状態をUIに結びつける場所です.このような彗星乗り物を表示できます.

[Body]
View body()
    => new VStack {
            new Text(comet.Rides.ToString())
    };

それぞれView コンストラクタ引数の最小のセットを取ります、そして、ここで、我々は州のオブジェクトint にstring . 我々は、さらにこのようにするために、C .

new Text(()=> $"{comet.Rides} rides taken.")

関数ラムダを使用しています()=> はい.これはあなたの状態をコメットのビューにバインドする最適な方法です.今、それはいつでもそのプロパティを再評価することができます“彗星”の変更の状態をいつでもそのプロパティを適用します.ラムダを持たない前者の方法では、そのビュー全体が再現される必要があります.

ビューの状態を変更する
これは彗星が他のMVU実装から分岐する顕著な場所です.メッセージと更新式典は合理化されます.この例でのライドカウントをインクリメントするにはButton 2つのコンストラクタ引数を取るビュー:タイトルのテキスト、およびアクションハンドラ.

new Button("Increment", ()=>{
    comet.Rides++;
})

When using State<T> without a BindingObject you'll use .Value to access the value you intend to change. Using the first example: ()=> count.Value++.

この状態の変化は再評価されるビューの本体をトリガーします.彗星は、仮想DOMを使用するので、これは非常に高速です.ビューのdifを作成し、変更を適用します.


彗星に乗る
より多くのビュー、およびフラックスなどの他のオプションを超えて状態を管理することについて言われるべきです.今のところこれは基本をカバーし、あなたが行く.
インストールし、いくつかの他の詳細を取得するには、私のチェックアウト.
そして、ボーナスのために、彗星、ジェームスクラーシーの著者は、参加しました.ネットマウイコミュニティスタンディングLiveStreamは、彗星と回答の質問については先週.楽しむ!