我能在减速器中调度一个动作吗？

Question

是否可以在一个减速器中发送一个动作？我有一个progressbar和一个音频元素。目标是在音频元素中更新时间时更新progressbar。但我不知道将ontimeupdate eventhandler放置在何处，也不知道如何在ontimeupdate的回调中分派操作来更新ProgressBar。下面是我的代码：

//reducer

const initialState = {
    audioElement: new AudioElement('test.mp3'),
    progress: 0.0
}

initialState.audioElement.audio.ontimeupdate = () => {
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration);
    //how to dispatch 'SET_PROGRESS_VALUE' now?
};


const audio = (state=initialState, action) => {
    switch(action.type){
        case 'SET_PROGRESS_VALUE':
            return Object.assign({}, state, {progress: action.progress});
        default: return state;
    }

}

export default audio;

Answer 1

在reducer中调度一个动作是一种反模式。您的reducer应该没有副作用，只需消化action有效负载并返回一个新的state对象。在还原器内添加侦听器和调度操作会导致链接操作和其他副作用。

听起来，初始化的AudioElement类和事件侦听器属于组件中，而不是状态中。在事件侦听器中，您可以分派一个操作，该操作将更新状态中的progress。

您可以在新的React组件中初始化AudioElement类对象，也可以将该类转换为React组件。

class MyAudioPlayer extends React.Component {
  constructor(props) {
    super(props);

    this.player = new AudioElement('test.mp3');

    this.player.audio.ontimeupdate = this.updateProgress;
  }

  updateProgress () {
    // Dispatch action to reducer with updated progress.
    // You might want to actually send the current time and do the
    // calculation from within the reducer.
    this.props.updateProgressAction();
  }

  render () {
    // Render the audio player controls, progress bar, whatever else
    return <p>Progress: {this.props.progress}</p>;
  }
}

class MyContainer extends React.Component {
   render() {
     return <MyAudioPlayer updateProgress={this.props.updateProgress} />
   }
}

function mapStateToProps (state) { return {}; }

return connect(mapStateToProps, {
  updateProgressAction
})(MyContainer);

请注意，updateProgressAction自动与dispatch包装在一起，因此您不需要直接调用dispatch。