Guía Completa sobre Arrays Reactivos en Svelte 5

En Svelte 5, el manejo de arrays reactivos se realiza utilizando las runes $state y $derived, permitiendo que los cambios en los datos sean reactivos sin necesidad de utilizar set() o update().

Definiendo un Array Reactivo en Svelte

Para crear un array reactivo, utilizamos $state:

let numbers = $state([1, 2, 3, 4]);

Podemos derivar datos a partir de este array usando $derived:

let sum = $derived(numbers.reduce((acc, curr) => acc + curr, 0));
let average = $derived(sum / numbers.length);
let evenNumbers = $derived(numbers.filter(n => n % 2 === 0));

Operaciones con Arrays Reactivos

Agregar un nuevo número al final

function addNumber() {
  numbers = [...numbers, numbers.length + 1];
}

Insertar un número en una posición específica

function insertAt(index, value) {
  numbers = [...numbers.slice(0, index), value, ...numbers.slice(index)];
}

Eliminar un número por índice

function removeAt(index) {
  numbers = numbers.filter((_, i) => i !== index);
}

Modificar un número en una posición específica

function updateAt(index, value) {
  numbers = numbers.map((n, i) => (i === index ? value : n));
}

Orden ascendente o descendente

function sortNumbers(ascending = true) {
  numbers = [...numbers].sort((a, b) => (ascending ? a - b : b - a));
}

Filtrar números mayores a un valor dado

function filterGreaterThan(value) {
  numbers = numbers.filter(n => n > value);
}

Multiplicar todos los elementos por un valor

function multiplyAll(multiplier) {
  numbers = numbers.map(n => n * multiplier);
}

Monitoreo de Cambios con `$effect`

Podemos observar los cambios en el array y sus valores derivados usando la rune $effect:

$effect(() => {
  console.log('Numbers updated:', numbers);
  console.log('Current sum:', sum);
  console.log('Current average:', average);
  console.log('Even numbers:', evenNumbers);
});

Conclusión

Svelte 5 facilita el manejo de arrays reactivos con $state y $derived, proporcionando una sintaxis clara y eficiente. Con estas herramientas, podemos gestionar listas de datos de forma reactiva y optimizada, sin necesidad de mutaciones directas.