Use mapDispatchToProps for Volume

js/components/Volume.jsx

@@ -3,51 +3,36 @@ import {connect} from 'react-redux';
 import {setVolume} from '../actionCreators';
 
 
-class Volume extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setVolume = this.setVolume.bind(this);
-    this.showMarquee = this.showMarquee.bind(this);
-    this.hideMarquee = this.hideMarquee.bind(this);
-  }
+const Volume = (props) => {
+  const {volume} = props;
+  const percent = volume / 100;
+  const sprite = Math.round(percent * 28);
+  const offset = (sprite - 1) * 15;
 
-  setVolume(e) {
-    this.props.dispatch(
-      setVolume(this.props.mediaPlayer, e.target.value)
-    );
-  }
+  const style = {
+    backgroundPosition: `0 -${offset}px`
+  };
 
-  showMarquee() {
-    this.props.dispatch({type: 'SET_FOCUS', input: 'volume'});
-  }
+  return <input
+    id='volume'
+    type='range'
+    min='0'
+    max='100'
+    step='1'
+    value={volume}
+    style={style}
+    onChange={props.setVolume}
+    onMouseDown={props.showMarquee}
+    onMouseUp={props.hideMarquee}
+  />;
+};
 
-  hideMarquee() {
-    this.props.dispatch({type: 'UNSET_FOCUS'});
-  }
+const mapStateToProps = (state) => state.media;
 
-  render() {
-    const {volume} = this.props;
-    const percent = volume / 100;
-    const sprite = Math.round(percent * 28);
-    const offset = (sprite - 1) * 15;
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  showMarquee: () => dispatch({type: 'SET_FOCUS', input: 'volume'}),
+  hideMarquee: () => dispatch({type: 'UNSET_FOCUS'}),
+  setVolume: (e) => dispatch(setVolume(ownProps.mediaPlayer, e.target.value))
+});
 
-    const style = {
-      backgroundPosition: `0 -${offset}px`
-    };
-
-    return <input
-      id='volume'
-      type='range'
-      min='0'
-      max='100'
-      step='1'
-      value={volume}
-      style={style}
-      onChange={this.setVolume}
-      onMouseDown={this.showMarquee}
-      onMouseUp={this.hideMarquee}
-    />;
-  }
-}
-
-module.exports = connect((state) => state.media)(Volume);
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Volume);