我可以在减速器中发送一个动作吗? [英] Can I dispatch an action in reducer?

问题描述

是否可以在减速器本身中分派动作?我有一个进度条和一个音频元素.目标是在音频元素中更新时间时更新进度条.但我不知道在哪里放置 ontimeupdate 事件处理程序，或者如何在 ontimeupdate 的回调中调度一个动作来更新进度条.这是我的代码:

is it possible to dispatch an action in a reducer itself? I have a progressbar and an audio element. The goal is to update the progressbar when the time gets updated in the audio element. But I don't know where to place the ontimeupdate eventhandler, or how to dispatch an action in the callback of ontimeupdate, to update the progressbar. Here is my code:

//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;

推荐答案

在 reducer 中调度 action 是一种反模式.您的减速器应该没有副作用，只需消化动作负载并返回一个新的状态对象.在 reducer 中添加侦听器和分派操作可能会导致操作链接和其他副作用.

Dispatching an action within a reducer is an anti-pattern. Your reducer should be without side effects, simply digesting the action payload and returning a new state object. Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.

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

Sounds like your initialized AudioElement class and the event listener belong within a component rather than in state. Within the event listener you can dispatch an action, which will update progress in state.

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

You can either initialize the AudioElement class object in a new React component or just convert that class to a React component.

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.

Note that the updateProgressAction is automatically wrapped with dispatch so you don't need to call dispatch directly.

这篇关于我可以在减速器中发送一个动作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！