javascript - 使用 Redux 播放音频文件

Question

我正在使用 React 和 Redux 开发一个应用程序。我有一个计时器 thunk，它每秒调度一个 Action ，并且状态会更新以表示实际时间。现在这对于 UI 来说非常有用，但我需要在特定时间播放声音，并且我不确定这个逻辑应该放在哪里。

我可以修改计时器 thunk 来播放声音，但这对我来说似乎不是一个好的解决方案，因为我认为计时器应该只负责调度“耗时”的操作。

我的另一个想法是向商店订阅一个监听器，它将检查状态并在必要时播放声音。

Answer 1

如何使用这样的声音存储:

const initialState = {
  currentSound: undefined
}

export default function sound(state = initialState, action) {
  switch(action.type) {
    case UPDATE_TIME:
      const time = action.time
      const sounds = {
        6: '/sound1.mp3',
        22: '/sound2.mp3',
        99: '/sound3.mp3'
      }

      return Object.assign({}, state, {currentSound: sounds[time]})
  }
}

然后，在您的组件中，您可以使用 react-redux 中的 connect 来获取状态 (state.sound.currentSound) 并播放如果有声音的话。由于每次分派(dispatch)操作时都会更新存储，因此如果当时没有声音，currentSound将为未定义。