ポリマーの複雑なデータバインディンググラフの設計/デバッグ

Question

私が知る限り、Polymerの会話とリソースのほとんどは、データバインディングのかなり簡単なケースをカバーしています。

しかし、Polymerは、原則としてIDE、WYSIWYGエディタ、または単純なゲームのようなものを構築するために使用できる強力なツールです。ページ上の要素の総数がかなり小さい（確かに< 1000、理想的には< 100）。

しかし、これらの例では、データバインディングのグラフは非常に複雑になり、単一のイベント（マウスクリックなど）の結果は、把握しにくい方法でバインディンググラフの周りを伝播/反響することがあります。

まず、これらのタイプの複雑なシナリオのベストプラクティスなどを議論するリソース（ビデオ/ブログなど）があります。バインディンググラフのグラフィック表現を生成するツールを持つ機会は2つあります。理想的には、そのようなグラフをページにレンダリングし、要素自体に重ね合わせることができます。事実、イベント中のデータ伝播を追跡し、グラフの周りを動くデータを示すGIFを生成する、「記録」機能を持つと想像することができます。

これは理想的な質問ではないかもしれませんが、githubの問題のように思われませんでした。

Answer 1

複雑なアプリケーションには、reduxなどの外部状態管理フレームワークを使用する必要があります。
polymer-reduxの動作は、reduxと対話できる単純な動作です。

基本的にコンポーネントをPresentational and Container Componentsに分割します。現在のポリマー成分は、reduxを意識せず、データのみを取り込み、イベントを放出するあなたの葉の成分です。コンテナコンポーネントは、還元動作を実装し、状態変更のアクションをディスパッチし、データを子（通常はプレゼンテーションコンポーネント）に渡します。

状態はグローバルに格納され、すべての状態の変更は簡単に単体テストできるリデューサで行われます。利点は、あなたがtime travel debuggingを行い、またあなたのstate as a graph