Share processed state across components - redux

Question

I have three components. My state has a property named state.selected.
Currently in my mapStateToProps I am doing this in all three components:
function mapStateToProps(state, ownProps) {
return { selected:state.selected }
}
In each presentational component I then do the same processing called getSelectedDisplays. This function does some processing based on what is selected.
var PresentaionalComponent_1 = React.createClass({
render: function() {
var displays = getSelectedDisplays();
// custom processing on `displays` for coponent 1
}
})
var PresentaionalComponent_2 = React.createClass({
render: function() {
var displays = getSelectedDisplays();
// custom processing on `displays` for coponent 2
}
})
var PresentaionalComponent_3 = React.createClass({
render: function() {
var displays = getSelectedDisplays();
// custom processing on `displays` for coponent 3
}
})
No control over parent component
I was hoping to avoid wrapping the three components in an extra div as my only need was to pass to them the result of getSelectedDisplays. I was hoping to avoid this:
React.createElement(OverContainer)
and OverContainer would be the only one receiving state.selected and it would then do getSelectedDisplays then it will render the three components with it as a prop:
var OverPresentaional = React.createClass({
render: function() {
var { selected } = this.props;
var display = getSelectedDisplays(selected);
return React.createElement('div', {},
React.createElement(PresentaionalComponent_1, { display });
React.createElement(PresentaionalComponent_2, { display });
React.createElement(PresentaionalComponent_3, { display });
);
}
}});
Is this possible without wrapping them in a parent div?

Answer 1

You can create a selector, that will encapsulate getting the data from the state, and computing derived properties:
export const getSelectedDisplays = (state) => {
const selected = state.selected;
const selectedDisplays = // whatever logic you need to get selectedDisplays from selected
return {
selectedDisplays;
};
};
Now for each component:
import { getSelectedDisplays } from 'selectorFile';
function mapStateToProps(state, ownProps) {
return getSelectedDisplays(state);
}
var PresentaionalComponent_1 = React.createClass({
render: function() {
var displays = this.props.selectedDisplays;
// custom processing on `displays` for coponent 1
}
})
etc...
The only problem is, that getting the data, and the logic will be performed 3 times, instead of ones. To solve that, you can create a memoized selector, that will cache and return the same result, if the supplied params (state in this case) haven't changed. Reselect is a library the creates memoized selectors for you.