¿Cuál sería el enfoque más eficiente para manejar la selección de elementos de una array ? Supongamos que la interfaz está definida en un dominio diferente, por lo que podría ampliar la interfaz, pero no modificarla.
Aquí hay dos enfoques que he pensado:
a) Agregar una bandera al elemento, por ejemplo, una propiedad selected
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) Agregar un observable adicional, por ejemplo, elementos 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) } } }NOTA: sé que agregar y filtrar podría hacerse de una manera de programación más funcional y, para ser honesto, no sé qué enfoque se adapta a Mobx , pero esta parte no es tan importante.
El primer enfoque con la propiedad selected es mucho más simple y es más "mobx way" de hacer las cosas. Tampoco cambia la matriz de elementos, por lo que, por ejemplo, si tiene un componente de lista con .map , no se volverá a procesar en el tiempo adicional.
Y si necesita selectedItems , puede simplemente agregar un captador computed que solo se volverá a calcular cuando algo cambie:
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) } }