使用 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）是要走的路。

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

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

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

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

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

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