Use reselect to memoize denormalization in UI state

Also upgrade react-redux to latest version. This is a performance update
This commit is contained in:
Eugen Rochko 2016-10-08 00:01:22 +02:00
parent 1f650d327d
commit ef9d4f4e06
12 changed files with 136 additions and 80 deletions

View file

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

View file

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

View file

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