From ef9d4f4e0615bcc42528e2e73ade0ba02baa3ed9 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Oct 2016 00:01:22 +0200 Subject: Use reselect to memoize denormalization in UI state Also upgrade react-redux to latest version. This is a performance update --- .../features/ui/containers/compose_form_container.jsx | 4 ++-- .../features/ui/containers/notifications_container.jsx | 8 ++------ .../features/ui/containers/status_list_container.jsx | 16 ++++++++++------ 3 files changed, 14 insertions(+), 14 deletions(-) (limited to 'app/assets/javascripts/components/features/ui') 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); -- cgit