Как обращаться с элементами DOM с сохранением состояния с помощью Flux

Question

Я работаю над созданием компонента медиа-проигрывателя React, который обертывает тег HTML5 <video>, и мне интересно, как этот тег и его события DOM с архитектурой Flux.

В Flux, Накопитель компонент прослушивает является источником истины, но с некоторыми элементами, как <video> тега, сам DOM поддерживает некоторое состояние, например, paused или currentTime. Как примирить это состояние с моим хранилищем?

До сих пор у меня есть компонент Player и PlayerStore. Когда <video> происходят события DOM, я отправлял такие действия Flux, как handlePlay, handlePause и handleTimeUpdate, чтобы предоставить обновления PlayerStore, чтобы хранилище могло сохранить это состояние. Кроме того, мой собственный пользовательский элемент управления контролирует отправку одних и тех же действий, но я не уверен, как «установить» состояние элемента <video> только тогда, когда исходное событие было от элементов управления, а не <video> событий; то есть я не хочу застрять в цикле, где, например:

1. <video> посылает «мой таймкод изменилось» DOM событие
2. Компонент слышит событие DOM и отправляет действие
3. Магазин получает действие и обновляет себя с помощью нового временного кода
4. Компонент, слушающий Store, слышит изменения и устанавливает (каким-то образом) новый временный код в элементе <video>. Однако нет причин, так как элемент <video> уже знал об изменении - это тот, который вызвал его, в первую очередь, несколько миллисекунд назад!

Как вы подходите к такому компоненту?

Answer 1

Я бы рекомендовал проверить текущее состояние ваших видео тегов в файле mustComponentUpdate и пропустить ревердер, если он уже находится в целевом состоянии.