What would be the most efficient approach to handle selecting items from an array. Let's asume the interface is defined in a different domain, so you could extend the interface, but not alter it.
Here are two approaches I have thought off:
a) Add a flag to the item, e.g. a selected property
interface Item extends OriginalItem {
selected: boolean
}
class ItemsStore {
public items: Item[]
constructor() {
makeAutoObservable(this)
}
public toggleItem(item, checked) {
const storedItem = this.items.find(i => i.id === item.id)
if (storedItem) {
storedItem.selected = checked
}
}
}
b) Add an additional observable, e.g. selectedItems
class ItemsStore {
public items: Item[]
public selectedItems: Item[]
constructor() {
makeAutoObservable(this)
}
public toggleItem(item, checked) {
const selectedIndex = this.selectedItems.findIndex(i => i.id === item.id)
if (checked && selectedIndex === -1) {
this.selectedItems.push(item)
} else if (!checked && selectedIndex !== -1) {
this.selectedItems.splice(selectedIndex, 1)
}
}
}
NOTE: I know adding and filtering-out could be done in a more functional programming manner, and to be honest I do not know what approach suits Mobx, but this part is not that important.
First approach with selected property is much simpler and is more "mobx way" of doing things. It also does not change the array of items, so for example if you have list component with .map it won't rerender extra time.
And if you need selectedItems you can just add computed getter which will only be recomputed when something changes:
class ItemsStore {
public items: Item[]
constructor() {
makeAutoObservable(this)
}
public toggleItem(item, checked) {
const storedItem = this.items.find(i => i.id === item.id)
if (storedItem) {
storedItem.selected = checked
}
}
// Will become optimised computed property
get selectedItems() {
return this.items.filter(item => item.selected)
}
}