Updating selected item in JavaScript apps with immutable state - reactjs

Question

Let's say I have a JavaScript/HTML app that
Manages items
Has a concept of a selected item
Gets realtime updates to items as the app runs.
If I want my app to use immutable state (immutable.js, redux, react, etc), conceptually, how would I keep updates to an item in the list in sync with the app's selected item, if they are the same?
If I am using plain JavaScript objects/arrays and mutation, then the selected item would be a reference to some object, and the list of items would be actually a list of references to item objects. If I change the property on the object in the list of items, then it will be in sync with the selected item because it's the same object.
How would I manage something similar if I am using immutable state?
If an update came through for an item that was selected, would I have to also remember to return a new state where the item in the list is different and the selected item has the same transformations applied?
One thought is to not have a selected item, but have a selected index, but when I reorder my list of items would I then have to remember to return a new state where the selected index is different?
Are there patterns for dealing with something like this?

Answer 1

Here is one way I do that. You could change the reference to index to an item.id.
class JDropSelectRender extends React.Component {
render() {
let items = this.props.options.map((option) => {
if (option.type == 'seperator') {
return (<div style={DropdownSeperatorSty} key={option.key}></div>)
} else {
let selected = Boolean(option.label == this.state.selected.label);
let labelSpanSty = {cursor: 'pointer'};
labelSpanSty.color = selected ? 'green' : 'black';
return (
<div
id='DropdownOptionSty'
key={option.value}
style={DropdownOptionSty}
onMouseDown={this.setValue.bind(this, option)}
onClick={this.setValue.bind(this, option)}
>
<span style={labelSpanSty}>{option.label}</span>
</div>
)
}
});
let value = (<div style={placeSty}>{this.state.selected.label}</div>);
let menu = this.state.isOpen ? <div style={DropdownMenuSty}>{items}</div> : null;
return (
<div id='DropdownSty' style={DropdownSty}>
<div
id='DropdownControlSty'
style={DropdownControlSty}
onMouseDown={this.handleMouseDown}
onTouchEnd={this.handleMouseDown}
>
{value}
<span id='DropdownArrowSty' style={DropdownArrowSty} />
</div>
{menu}
</div>
)
}
}
export default class JDropSelect extends JDropSelectRender {
constructor() {
super();
this.state = { isOpen: false, selected: {} };
}
componentWillMount() {
this.setState({selected: this.props.defaultSelected || { label: 'Select...', value: '' }})
}
componentWillReceiveProps(newProps) {
if (newProps.defaultSelected && newProps.defaultSelected !== this.state.selected) {
this.setState({selected: newProps.defaultSelected});
}
}
handleMouseDown = (event) => {
if (event.type == 'mousedown' && event.button !== 0) return;
event.stopPropagation();
event.preventDefault();
this.setState({ isOpen: !this.state.isOpen })
}
setValue = (option) => {
if (option !== this.state.selected && this.props.onChange) this.props.onChange(this.props.itemName, option);
this.setState({ selected: option, isOpen: false });
}
}