使用 Redux 管理视频播放器

Using Redux to Manage a Video Player

本文关键字：播放器 视频 管理 Redux 使用      更新时间：2023-09-26

使用 Redux 管理视频播放器的理想方法是什么，主要是在调度播放/暂停视频的操作方面？

我正在努力在 React 应用程序中构建一个视频播放器，我在视频播放器上有事件侦听器调度相关事件以更新状态。让父组件对调度 PLAY 或暂停操作的其他组件执行操作的最佳方法是什么？

例如，我想考虑的一个用例是正在播放一个视频，所有其他视频确保暂停播放。

我想到的两种方式是：

1）让父组件检查componentWillReceiveProps中的更改，并检查类似

if (this.props.paused && !nextProps.paused) {
    this.refs.video.play()
}

2） 在状态树中存储对底层视频元素的引用，并使用中间件对某些操作（例如PLAY操作）进行操作，例如

if (action.type === PLAY) {
    let state = getState();
    state.players[action.payload.playerId].play();
}

一种策略会比另一种策略更"正确"，还是有另一种方法更有意义？

1）是要走的路。

您的视频只是一个视图组件。在 React 中，你总是希望组件的 props 来决定输出。

2） 的问题在于视频对象不属于该状态。你告诉 Redux 太多关于实现细节的信息。Redux 不关心实现细节;它只是一个状态容器。

更新

经过进一步思考，我建议componentDidUpdate()是放置此逻辑的最佳位置。

componentDidUpdate(prevProps)
  if (prevProps.paused && !this.props.paused) {
    this.refs.video.play();
  }
}

优点是componentDidUpdate()在重新渲染后调用。对于您的目的来说，这可能不会有什么不同，但是在 React 有机会更新 DOM 之前触发 DOM 事件可能会导致一些不幸的竞争条件。

当然，这并没有改变我的建议的要点，即输出应该始终由道具（或状态）驱动。

我认为你不需要（2），（1）是相当不错的。现在，您只处理播放动作，但您可以在此处添加暂停，如下所示：

if (this.props.paused && !nextProps.paused) {
  this.refs.video.play()
}
if (!this.props.paused && nextProps.paused) {
  this.refs.video.pause()
}

在这种情况下，您的 html 播放器状态将与 redux 播放器状态同步。

例如，我想考虑的一个用例是正在播放一个视频，所有其他视频确保暂停播放。

在这种情况下，您可以在减速器中处理这种情况。我会通过具有暂停状态的 id 存储所有玩家，例如： 

{
 1: {
   paused: true, 
 },
 2: {
   paused: false,
 },
 ...
}

您需要在操作中添加玩家 ID 并在收到操作时暂停其他玩家PLAY：

function players(state = {}, action) {
  switch (action.type) {
    case PAUSE: 
      return {
        ...state,
        [action.id]: {
          paused: true
        }
      }
    case PLAY: 
      const nowPlaying = Object.keys(state).find(id => !state[id].paused);
      const newState = {
        ...state,
        [action.id]: {
          paused: false
        }
      };
      if (nowPlaying) {
        newState[nowPlaying].paused = true;
      }
      return newState;
  }
}
相关文章：