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

Я работаю над созданием компонента медиаплеера 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> уже знал об изменении — именно он инициировал его несколько миллисекунд назад!

Как бы вы подошли к такому компоненту?


reactjs javascript flux reactjs-flux martyjs
person Collin Allen    schedule 09.07.2015    source источник
comment
Почему бы не отслеживать состояние воспроизведения/паузы в самом компоненте (как в this.setState)? И зачем отправлять действия для таких вещей, как handlePlay? Нужно ли что-то за пределами вашего компонента знать об этих событиях?   -  person ray hatfield    schedule 10.07.2015
comment
Вот как я это сделаю: codepen.io/FullR/pen/YXLQyO?editors=001 (не работающий пример, просто базовая структура). Но я предполагаю, что вам не нужно изменять состояние видеоэлемента (например, программно изменять состояние паузы или время с помощью переданной опоры). Если вам нужно изменить эти вещи, я бы посоветовал воспользоваться хуком componentDidUpdate, чтобы внести необходимые изменения в элемент <video>.   -  person SimpleJ    schedule 10.07.2015
comment
Я планирую сохранить текущее время воспроизведения в базе данных, поэтому я использую Store (и компонент контейнера).   -  person Collin Allen    schedule 10.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

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

person iSchluff    schedule 10.07.2015