How to handle with stateful DOM elements with Flux

Question

I'm working on building a React media player component that wraps an HTML5 <video> tag, and I'm wondering how that tag and its DOM events with with the Flux architecture.

In Flux, the Store the component listens to is its source of truth, but with some elements like the <video> tag, the DOM itself maintains some state, such as paused or currentTime. How do I reconcile that state with that of my Store?

So far, I've got a Player component and PlayerStore. When <video> DOM events happen, I've been dispatching Flux actions such as handlePlay, handlePause, and handleTimeUpdate to provide updates to the PlayerStore so that the store can keep that state. As well, my own custom player controls dispatch the same actions, but I'm unsure of how to "set" the state of the <video> element only when the original event was from the controls, not <video> events; i.e. I don't want to get stuck in a loop where, for example:

1. The <video> sends a "my timecode changed" DOM event
2. The component hears the DOM event and dispatches an action
3. The Store receives the action and updates itself with the new timecode
4. The component listening to the Store hears the change and sets (somehow) the new timecode on the <video> element. However, there's no reason to, since the <video> element already knew about the change — it's the one that triggered it in the first place a few milliseconds ago!

How would you approach such a component?

Answer 1

I would recommend checking your video tags current state in shouldComponentUpdate and skipping a rerender if it's already in the target state.