Use reselect to memoize denormalization in UI state

Also upgrade react-redux to latest version. This is a performance update

3 files changed, 14 insertions, 14 deletions

diff --git a/app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx
index 2427f89f0..747eb9691 100644
--- a/app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx
+++ b/app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx
@@ -1,14 +1,14 @@
 import { connect }                                          from 'react-redux';
 import ComposeForm                                          from '../components/compose_form';
 import { changeCompose, submitCompose, cancelReplyCompose } from '../../../actions/compose';
-import { selectStatus }                                     from '../../../reducers/timelines';
+import { getStatus }                                        from '../../../selectors';
 
 const mapStateToProps = function (state, props) {
   return {
     text: state.getIn(['compose', 'text']),
     is_submitting: state.getIn(['compose', 'is_submitting']),
     is_uploading: state.getIn(['compose', 'is_uploading']),
-    in_reply_to: selectStatus(state, state.getIn(['compose', 'in_reply_to']))
+    in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to']))
   };
 };
 
diff --git a/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx b/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx
index bc339ef28..eb12989e5 100644
--- a/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx
+++ b/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx
@@ -4,14 +4,10 @@ import {
   dismissNotification,
   clearNotifications
 }                              from '../../../actions/notifications';
+import { getNotifications }    from '../../../selectors';
 
 const mapStateToProps = (state, props) => ({
-  notifications: state.get('notifications').map((item, i) => ({
-    message: item.get('message'),
-    title: item.get('title'),
-    key: item.get('key'),
-    dismissAfter: 5000
-  })).toJS()
+  notifications: getNotifications(state)
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx b/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx
index 605216eba..045cc59d1 100644
--- a/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx
+++ b/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx
@@ -8,14 +8,18 @@ import {
   unfavourite
 }                            from '../../../actions/interactions';
 import { expandTimeline }    from '../../../actions/timelines';
-import { selectStatus }      from '../../../reducers/timelines';
+import { makeGetTimeline }   from '../../../selectors';
 import { deleteStatus }      from '../../../actions/statuses';
 
-const mapStateToProps = function (state, props) {
-  return {
-    statuses: state.getIn(['timelines', props.type]).map(id => selectStatus(state, id)),
+const makeMapStateToProps = () => {
+  const getTimeline = makeGetTimeline();
+
+  const mapStateToProps = (state, props) => ({
+    statuses: getTimeline(state, props.type),
     me: state.getIn(['timelines', 'me'])
-  };
+  });
+
+  return mapStateToProps;
 };
 
 const mapDispatchToProps = function (dispatch, props) {
@@ -50,4 +54,4 @@ const mapDispatchToProps = function (dispatch, props) {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(StatusList);
+export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);