HTML5 タグをラップする React メディア プレーヤー コンポーネントの構築に取り組んでい<video>ます。そのタグとその DOM イベントが Flux アーキテクチャでどのように機能するのか疑問に思っています。
Flux では、コンポーネントがリッスンする Store が真の情報源ですが、<video>タグなどの一部の要素では、DOM 自体がpausedorなどの状態を維持しcurrentTimeます。その状態と私のストアの状態をどのように調和させますか?
これまでのところ、PlayerコンポーネントとPlayerStore. DOM イベントが発生すると、ストアがその状態を維持できるように、 、、<video>などの Flux アクションをディスパッチして更新を提供してきました。同様に、私自身のカスタム プレーヤー コントロールも同じアクションをディスパッチしますが、元のイベントがイベントではなくコントロールからのものである場合にのみ、要素の状態を「設定」する方法がわかりません。つまり、たとえば次のようなループにはまりたくありません。handlePlayhandlePausehandleTimeUpdatePlayerStore<video><video>
- は
<video>「my timecode changed」DOM イベントを送信します - コンポーネントは DOM イベントを受け取り、アクションをディスパッチします
- ストアはアクションを受け取り、新しいタイムコードで自身を更新します
- Store をリッスンしているコンポーネントは、変更を聞き取り、(何らかの方法で)
<video>要素に新しいタイムコードを設定します。ただし、<video>要素は変更を既に認識しているため、変更する理由はありません。数ミリ秒前に最初にトリガーした要素です。
そのようなコンポーネントにどのようにアプローチしますか?