diff --git a/js/components/Shuffle.jsx b/js/components/Shuffle.jsx
index b208df6b..d723374c 100644
--- a/js/components/Shuffle.jsx
+++ b/js/components/Shuffle.jsx
@@ -3,21 +3,15 @@ import {connect} from 'react-redux';
 import classnames from 'classnames';
 
 
-class Shuffle extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-  handleClick() {
-    this.props.dispatch({type: 'TOGGLE_SHUFFLE'});
-  }
-  render() {
-    return <div
-      id='shuffle'
-      className={classnames({selected: this.props.shuffle})}
-      onClick={this.handleClick}
-    />;
-  }
-}
-
-module.exports = connect((state) => state.media)(Shuffle);
+const Shuffle = ({shuffle, toggleShuffle}) => (
+  <div
+    id='shuffle'
+    className={classnames({selected: shuffle})}
+    onClick={toggleShuffle}
+  />
+);
+const mapStateToProps = (state) => state.media;
+const mapDispatchToProps = (dispatch) => ({
+  toggleShuffle: () => dispatch({type: 'TOGGLE_SHUFFLE'})
+});
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Shuffle);