Use reselect to memoize denormalization in UI state

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

app/assets/javascripts/components/features/account/index.jsx

@@ -20,22 +20,18 @@ import {
 }                            from '../../actions/interactions';
 import Header                from './components/header';
 import {
-  selectStatus,
-  selectAccount
-}                            from '../../reducers/timelines';
+  getAccountTimeline,
+  getAccount
+}                            from '../../selectors';
 import StatusList            from '../../components/status_list';
 import LoadingIndicator      from '../../components/loading_indicator';
 import Immutable             from 'immutable';
 import ActionBar             from './components/action_bar';
 import Column                from '../ui/components/column';
 
-function selectStatuses(state, accountId) {
-  return state.getIn(['timelines', 'accounts_timelines', accountId], Immutable.List([])).map(id => selectStatus(state, id)).filterNot(status => status === null);
-};
-
 const mapStateToProps = (state, props) => ({
-  account: selectAccount(state, Number(props.params.accountId)),
-  statuses: selectStatuses(state, Number(props.params.accountId)),
+  account: getAccount(state, Number(props.params.accountId)),
+  statuses: getAccountTimeline(state, Number(props.params.accountId)),
   me: state.getIn(['timelines', 'me'])
 });
 

app/assets/javascripts/components/features/public_timeline/index.jsx

@@ -1,33 +1,35 @@
-import { connect }        from 'react-redux';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import StatusList         from '../../components/status_list';
-import Column             from '../ui/components/column';
-import Immutable          from 'immutable';
-import { selectStatus }   from '../../reducers/timelines';
+import { connect }         from 'react-redux';
+import PureRenderMixin     from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes  from 'react-immutable-proptypes';
+import StatusList          from '../../components/status_list';
+import Column              from '../ui/components/column';
+import Immutable           from 'immutable';
+import { makeGetTimeline } from '../../selectors';
 import {
   updateTimeline,
   refreshTimeline,
   expandTimeline
-}                         from '../../actions/timelines';
-import { deleteStatus }   from '../../actions/statuses';
-import { replyCompose }   from '../../actions/compose';
+}                          from '../../actions/timelines';
+import { deleteStatus }    from '../../actions/statuses';
+import { replyCompose }    from '../../actions/compose';
 import {
   favourite,
   reblog,
   unreblog,
   unfavourite
-}                         from '../../actions/interactions';
+}                          from '../../actions/interactions';
 
-function selectStatuses(state) {
-  return state.getIn(['timelines', 'public'], Immutable.List()).map(id => selectStatus(state, id)).filterNot(status => status === null);
+const makeMapStateToProps = () => {
+  const getTimeline = makeGetTimeline();
+
+  const mapStateToProps = (state) => ({
+    statuses: getTimeline(state, 'public'),
+    me: state.getIn(['timelines', 'me'])
+  });
+
+  return mapStateToProps;
 };
 
-const mapStateToProps = (state) => ({
-  statuses: selectStatuses(state),
-  me: state.getIn(['timelines', 'me'])
-});
-
 const PublicTimeline = React.createClass({
 
   propTypes: {
@@ -100,4 +102,4 @@ const PublicTimeline = React.createClass({
 
 });
 
-export default connect(mapStateToProps)(PublicTimeline);
+export default connect(makeMapStateToProps)(PublicTimeline);

app/assets/javascripts/components/features/status/index.jsx

@@ -10,16 +10,16 @@ import ActionBar             from './components/action_bar';
 import Column                from '../ui/components/column';
 import { favourite, reblog } from '../../actions/interactions';
 import { replyCompose }      from '../../actions/compose';
-import { selectStatus }      from '../../reducers/timelines';
-
-function selectStatuses(state, ids) {
-  return ids.map(id => selectStatus(state, id)).filterNot(status => status === null);
-};
+import {
+  getStatus,
+  getStatusAncestors,
+  getStatusDescendants
+}                            from '../../selectors';
 
 const mapStateToProps = (state, props) => ({
-  status: selectStatus(state, Number(props.params.statusId)),
-  ancestors: selectStatuses(state, state.getIn(['timelines', 'ancestors', Number(props.params.statusId)], Immutable.OrderedSet())),
-  descendants: selectStatuses(state, state.getIn(['timelines', 'descendants', Number(props.params.statusId)], Immutable.OrderedSet())),
+  status: getStatus(state, Number(props.params.statusId)),
+  ancestors: getStatusAncestors(state, Number(props.params.statusId)),
+  descendants: getStatusDescendants(state, Number(props.params.statusId)),
   me: state.getIn(['timelines', 'me'])
 });
 

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']))
   };
 };
 

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) => {

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