Guía de Gestión de Estados y Stores en Svelte

Los stores en Svelte son una forma reactiva y eficiente de manejar estados compartidos entre componentes. Permiten almacenar valores y escuchar cambios automáticamente.

¿Qué son los Stores en Svelte?

Un store es un contenedor de datos reactivo que permite:

  Stores en Svelte

  • Almacenar valores.
  • Reactar automáticamente a los cambios en los valores.
  • Compartir estados entre múltiples componentes.

Svelte incluye tres tipos de stores principales:

  stores en Svelte

  1. writable: Para valores que se pueden leer y escribir.
  2. readable: Para valores de solo lectura.
  3. derived: Para valores derivados de otros stores.

Tipos de Stores

1writable Store

Es el tipo de store más utilizado en Svelte. Permite tanto leer su valor actual como actualizarlo de manera reactiva.

Ejemplo: Este código crea un store writable* llamado contador con un valor inicial de 0. Usa las funciones incrementar y resetear para modificar el valor del contador, y se muestra en la vista con la suscripción $contador, actualizándose al hacer clic en los botones.

js 
<script>
import { writable } from 'svelte/store';

// Crear un store writable
export const contador = writable(0);

// Funciones para modificar el valor
const incrementar = () => contador.update(n => n + 1);
const resetear = () => contador.set(0);
</script>

<button on:click={incrementar}>Incrementar</button>
<button on:click={resetear}>Resetear</button>
<p>El valor actual es: {$contador}</p>

ejemplo 2: El store user mantiene un objeto con propiedades name y age. Usamos update() para modificar estas propiedades y reflejarlas en la vista con la suscripción $user.

js 
<script>
import { writable } from 'svelte/store';

// Crear un writable store para un objeto
let user = writable({
  name: 'Juan',
  age: 25
});

// Función para actualizar el nombre
function updateName(newName) {
  user.update(currentUser => {
    return { ...currentUser, name: newName };
  });
}

// Función para incrementar la edad
function incrementAge() {
  user.update(currentUser => {
    return { ...currentUser, age: currentUser.age + 1 };
  });
}
</script>

<main>
<h1>Usuario: {$user.name}</h1>
<p>Edad: {$user.age}</p>
<button on:click={() => updateName('Carlos')}>Cambiar nombre a Carlos</button>
<button on:click={incrementAge}>Incrementar edad</button>
</main>

2readable Store

Un store de solo lectura que puede ser configurado para actualizar su valor automáticamente.

Ejemplo 1: Este código crea un store readable llamado hora que se actualiza cada segundo con la hora actual. Se muestra en la vista con $hora y se formatea usando toLocaleTimeString().

js 
<script>
import { readable } from 'svelte/store';

// Crear un store readable que da la hora actual
export const hora = readable(new Date(), (set) => {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});
</script>

<p>La hora actual es: {$hora.toLocaleTimeString()}</p>

Ejemplo 2: Este ejemplo muestra un mensaje inicial de “Cargando…” que cambia a “¡Carga completa!” después de 3 segundos.

js 
<script>
import { readable } from 'svelte/store';

// Crear un store readable que da un mensaje
export const mensaje = readable("Cargando...", (set) => {
  setTimeout(() => {
    set("¡Carga completa!");
  }, 3000);
});
</script>

<p>{$mensaje}</p>

3derived Store

Un store que calcula su valor en función de otros stores, permitiendo que se actualice automáticamente cuando los stores de los que depende cambian.

Ejemplo 1: Este código crea dos stores (precio y cantidad) y un store derivado total que calcula el precio total multiplicando el precio por la cantidad. Los valores de total se actualizan automáticamente cuando cambian precio o cantidad.

js 
<script>
import { writable, derived } from 'svelte/store';

// Stores base
export const precio = writable(100);
export const cantidad = writable(2);

// Store derivado
export const total = derived(
  [precio, cantidad],
  ([$precio, $cantidad]) => $precio * $cantidad
);
</script>

<p>Precio: {$precio} USD</p>
<p>Cantidad: {$cantidad}</p>
<p>Total: {$total} USD</p>

Ejemplo 2: Este código crea un store numero y un store derivado doble que calcula el doble del valor de numero. Los valores de doble se actualizan automáticamente cuando cambia numero.

js 
<script>
import { writable, derived } from 'svelte/store';

// Store base
export const numero = writable(5);

// Store derivado
export const doble = derived(numero, $numero => $numero * 2);
</script>

<p>Número: {$numero}</p>
<p>Doble: {$doble}</p>

Uso de $store para Manejar Reactividad

La sintaxis $store permite acceder al valor actual de un store de manera reactiva dentro de un componente, actualizándose automáticamente cuando el valor del store cambia.

Ejemplo 1:

js 
<script>
import { writable } from 'svelte/store';

// Crear un store writable
const nombre = writable('Mundo');
</script>

<input bind:value={$nombre} placeholder="Escribe tu nombre" />
<p>Hola, {$nombre}!</p>

En este ejemplo:

  • $nombre se actualiza automáticamente cuando el usuario escribe en el campo de entrada.
  • La reactividad hace que el texto del párrafo cambie dinámicamente.

Ejemplo 2: En este ejemplo, el valor de contador se muestra usando $contador y se actualiza automáticamente cuando se hace clic en el botón para incrementar el valor.

js 
<script>
import { writable } from 'svelte/store';

// Crear un store
export const contador = writable(0);

// Función para incrementar el contador
function incrementar() {
  contador.update(n => n + 1);
}
</script>

<p>Contador: {$contador}</p>
<button on:click={incrementar}>Incrementar</button>
  Conclusión

Los stores en Svelte son una herramienta poderosa para manejar estados de forma reactiva y compartirlos entre componentes. Ya sea que necesites estados simples o más complejos con lógica derivada, Svelte tiene la solución adecuada para tus necesidades.