バックエンドシステムで維持されているアプリケーションの状態があるとしましょう。このように見えます
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_char
isの場合は div がなく、 is a のNothing
場合は .の div はありません。MyState
State1
State2
わかりやすくするためにいくつかの例を示します。
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 でその文字列を変更する必要があります。ただし、変更によって兄弟ノードまたは親ノードが再描画されることはありません。Nothing
Just 'a'
ms1_text
"foo"
"bar"
ms1_text
コードをどのように構成すればよいですか? getLatestState
ビルディングブロックとしてのAPIを考えると、これは可能ですか? 単一の値から構築しようとすることで、Reflex の要点を完全に見逃しているのDynamic
でしょうか。アプローチを再考する必要がありますか?
特に、最初の障害は、Dynamic に State1 が含まれているか State2 が含まれているかを簡単に調べられないことです。dyn
orwidgetHold
ここで、状態を単純な値として扱い、全体を描画するアクションを生成できるfmap
関数を使用する可能性があります。しかし、その後、すべての共有が失われます。状態が変化するたびに、UI 全体が最初から再描画されます。dynMyState
m ()
注: これは、Reflex Dynamic 内の値で分岐するにはどうすればよいですか?へのより詳細なフォローアップの質問です。. この質問の違い/より明確な点は、検査された値内のすべての効率的な更新を失わないようにしたいという追加の欲求です。その質問にも協力してくれたみんなに感謝します!