Reactividad

Estado

• Svelte tiene un sistema de reactividad para mantener el DOM sincronizado con el estado de la aplicación, por ejemplo, en respuesta a un evento.
• Se define la variable, y el valor de la variable se envuelve en $state(x)
• Conocido como runa y es la forma de decirle a Svelte que no es una variable común
• Las runas parecen funciones pero no lo son

<script>
	let count = $state(0);

	function increment() {
	    // Reassignments
		count += 1;
	}
</script>

<button onclick={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

Estado compartido o universal

• Las runas se pueden usar dentro de los componentes .svelte para añadir reactividad
• También se pueden usar runas fuera de los componentes, por ejemplo, para compartir un estado global
• Para poder usar runas fuera de los componentes, la extensión del archivo debe ser some.svelte.ts

Estado global en un archivo compartido, por ejemplo shared.svelte.ts

src/shared.svelte.ts

export const counter = $state({
	count: 0
});

Uso y modificación del estado

src/Counter.svelte

<script>
	import { counter } from './shared.svelte.js';
</script>

<button onclick={() => counter.count += 1}>
	clicks: {counter.count}
</button>

Se utiliza el mismo componente varias veces, pero siguen compartiendo estado

src/App.svelte

<script>
	import Counter from './Counter.svelte';
</script>

<Counter />
<Counter />
<Counter />

Deep state

• En el ejemplo anterior, el estado reacciona a las reasignaciones
• El estado también puede reaccionar a las mutaciones, llamado deep state
• La reactividad profunda utiliza proxies y las mutaciones del proxy no afectan al objeto original

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

	function addNumber() {
		// Change the array
		//numbers[numbers.length] = numbers.length + 1;
		numbers.push(numbers.length + 1)
	}
</script>

<p>{numbers.join(' + ')} = ...</p>

<button onclick={addNumber}>
	Add a number
</button>

Derived state

• Se utiliza para derivar un estado de otro (reaccionar a otro estado)
• La expresión dentro de la declaración $derived se volverá a evaluar cada vez que el estado al que hace referencia, cambie

<script>
	// Original state
	let numbers = $state([1, 2, 3, 4]);

	// It reacts when the other state changes
	let total = $derived(numbers.reduce((t, n) => t + n, 0));

	function addNumber() {
		numbers.push(numbers.length + 1);
	}
</script>

<p>{numbers.join(' + ')} = {total}</p>

<button onclick={addNumber}>
	Add a number
</button>