3

バックエンドシステムで維持されているアプリケーションの状態があるとしましょう。このように見えます

data MyState = State1 MyState1 | State2 MyState2

data MyState1 = MyState1 { ms1_text :: Text, ms1_int :: Int }
data MyState2 = MyState2 { ms2_bool :: Bool, ms2_maybe_char :: Maybe Char }

バックエンドシステムから最新の状態を取得する機能も持っています

getLatestState :: IO MyState

バックエンドに繰り返しクエリを実行することで、それをダイナミックにパッケージ化する方法を理解できると確信しています。

dynMyState :: MonadWidget t m => Dynamic t MyState

これをhtmlにレンダリングしたい。データ構造の各部分を div にレンダリングします。ただし、存在しないものはまったくレンダリングされるべきではありません。したがって、ms2_maybe_charisの場合は div がなく、 is a のNothing場合は .の div はありません。MyStateState1State2

わかりやすくするためにいくつかの例を示します。

State1 (MyState1 "foo" 3)

になる

<div class=MyState1>
    <div>foo</div>
    <div>3</div>
</div>

State2 (MyState2 False Nothing)

になる

<div class=MyState2>
    <div>False</div>
</div>

理想的には、DOM の各部分は必要な場合にのみ変更する必要があります。そのため、が からにms2_maybe_char変更された場合は、新しい div を作成する必要があります。または、が からに変更された場合、DOM でその文字列を変更する必要があります。ただし、変更によって兄弟ノードまたは親ノードが再描画されることはありません。NothingJust 'a'ms1_text"foo""bar"ms1_text

コードをどのように構成すればよいですか? getLatestStateビルディングブロックとしてのAPIを考えると、これは可能ですか? 単一の値から構築しようとすることで、Reflex の要点を完全に見逃しているのDynamicでしょうか。アプローチを再考する必要がありますか?

特に、最初の障害は、Dynamic に State1 が含まれているか State2 が含まれているかを簡単に調べられないことです。dynorwidgetHoldここで、状態を単純な値として扱い、全体を描画するアクションを生成できるfmap関数を使用する可能性があります。しかし、その後、すべての共有が失われます。状態が変化するたびに、UI 全体が最初から再描画されます。dynMyStatem ()

注: これは、Reflex Dynamic 内の値で分岐するにはどうすればよいですか?へのより詳細なフォローアップの質問です。. この質問の違い/より明確な点は、検査された値内のすべての効率的な更新を失わないようにしたいという追加の欲求です。その質問にも協力してくれたみんなに感謝します!

4

1 に答える 1