Moving frequently-updated props into relevant components (now connect-ed) to reduce full re-renders

src/js/components/Hotkeys.js

@@ -1,6 +1,11 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
-export default class Hotkeys extends React.Component {
+import * as uiActions from '../services/ui/actions';
+import * as mopidyActions from '../services/mopidy/actions';
+
+class Hotkeys extends React.Component {
     
 	constructor(props){
 		super(props);
@@ -162,4 +167,23 @@ export default class Hotkeys extends React.Component {
     render(){
         return null;
     }
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		volume: (state.mopidy.volume ? state.mopidy.volume : false),
+		mute: state.mopidy.mute,
+		play_state: state.mopidy.play_state,
+		play_time_position: parseInt(state.mopidy.time_position),
+        dragging: state.ui.dragger && state.ui.dragger.dragging,
+	};
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Hotkeys)

src/js/components/Notifications.js

@@ -1,10 +1,17 @@
 
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as uiActions from '../services/ui/actions';
+import * as spotifyActions from '../services/spotify/actions';
+import * as lastfmActions from '../services/lastfm/actions';
+import * as geniusActions from '../services/genius/actions';
+import * as snapcastActions from '../services/snapcast/actions';
 
-import Link from './Link';
 import Icon from './Icon';
 
-export default class Notifications extends React.Component{
+class Notifications extends React.Component{
 
 	constructor(props){
 		super(props)
@@ -192,4 +199,24 @@ export default class Notifications extends React.Component{
 			</div>
 		)
 	}
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
+		notifications: (state.ui.notifications ? state.ui.notifications : []),
+		processes: (state.ui.processes ? state.ui.processes : {}),
+	};
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch),
+		geniusActions: bindActionCreators(geniusActions, dispatch),
+		lastfmActions: bindActionCreators(lastfmActions, dispatch),
+		snapcastActions: bindActionCreators(snapcastActions, dispatch),
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Notifications)