javascript - 使用 Redux 管理视频播放器

Question

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

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

例如，我要说明的一个用例是正在播放一个视频，而所有其他视频都确保暂停播放。

我想到的两种方式是:

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();
}

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

Answer 1

1) 是要走的路。

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

2) 的问题是视频对象不属于状态。你对 Redux 的实现细节说得太多了。 Redux 不关心实现细节；它只是一个状态容器。

更新

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

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

优点是 componentDidUpdate() 在重新渲染后被调用。它可能不会对您的目的产生影响，但在 React 有机会更新 DOM 之前触发 DOM 事件可能会导致一些不幸的竞争条件。

当然，这不会改变我的建议的要点，即输出应该始终由 Prop (或状态)驱动。