La gestión del estado es una parte importante de toda aplicación web moderna. Cada marco de desarrollo web importante, como React y Vue, tiene diferentes formas de manejar el estado.
Svelte no es una excepción y la biblioteca ofrece varios enfoques para abordar el problema del Estado y cómo gestionarlo.
¿Qué es la gestión estatal y por qué es importante?
En desarrollo web, «estado» se refiere a los datos que informan la situación actual de una página o parte de ella. Piense en crear un sitio web de compras con muchas páginas. Las personas pueden mirar cosas para comprar, poner artículos en un carrito y luego pagar.
Si desea que el ícono del carrito muestre la cantidad de artículos que contiene, sin importar cuál sea la página actual, la administración del estado le resultará realmente útil. Garantizará que el carrito se actualice inmediatamente cada vez que el usuario agregue o elimine artículos, sin importar dónde se encuentren en el sitio.
La gestión del estado es importante porque facilita el seguimiento del flujo de datos entre los componentes de una aplicación. Por parte del usuario, una gestión adecuada del estado debería dar como resultado una experiencia más eficiente y menos frustrante.
Gestión estatal en Svelte
En el nivel más básico, puede definir y actualizar una variable de estado en Svelte usando el signo igual (=). Por ejemplo, si desea que el contenido de texto de un h1 Para reflejar una variable de estado particular, puede hacer lo siguiente:
{count}
Este bloque de código define una variable de estado, contarcon el valor predeterminado de «0». También fija el contenido de la h1 elemento al valor actual de este contar variable. Finalmente, le brinda al usuario una forma de aumentar la variable de estado de conteo haciendo clic en el botón botón.
Actualización de una variable de estado de matriz en Svelte
Eche un vistazo al siguiente bloque de código:
- {item}
{#each todoList as item}
{/each}
Este bloque de código vincula una matriz a la variable de estado, lista de quehaceres. Cuando haces clic en Eliminar el último elemento botón, ejecuta el eliminarÚltimoArtículo() función que elimina el último elemento del lista de quehaceres variable.
Sin embargo, si ejecuta este código en un navegador, notará que, cuando hace clic en el botón para eliminar el último elemento, la lista no se actualiza.
Svelte reacciona a la tarea con el signo igual, por lo que no activará ninguna actualización después de una llamada a matriz.pop(). Para solucionar esto, puedes engañar a Svelte para que vuelva a representar la lista asignando el lista de quehaceres variable a sí mismo:
function removeLastItem() {
todoList.pop();
todoList = todoList;
}
Cuando ejecuta el código en el navegador, la matriz de estado debería actualizarse correctamente al hacer clic en el botón.
Gestión del estado con tiendas Svelte
Las tiendas facilitan compartir el estado entre componentes no relacionados. Una tienda en Svelte es simplemente un objeto al que puedes conectarte y escuchar cambios con el suscribir método. Para escribir un almacén simple de lectura y escritura, comience importando el grabable función de la esbelto/tienda Módulo JavaScript, como este:
import { writeable } from "svelte/store"
Digamos que tienes un tienda.js archivo que contiene lo siguiente:
import { writable } from "svelte/store";export const todoList = writable([
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
"Water the flowers"
]);
Este código establece una constante, lista de quehaceresy alimenta una matriz en el grabable función. Ahora puede importar la variable de tienda a cualquier componente con el que desee usarla:
Si desea hacer referencia a la variable, utilice el suscribir método como este:
let list;todoList.subscribe((items)=>{
list = items;
})
La función de devolución de llamada del suscribir El método toma el valor de la tienda existente como argumento y establece el lista variable local a la elementos argumento. Ahora puedes renderizar cada elemento del lista matriz como esta:
- {item}
{#each list as item}
{/each}
Para actualizar el valor de la tienda, utilice el actualizar() método. La función de devolución de llamada de este método toma el valor de la tienda actual y devuelve el nuevo elemento que se establecerá en la tienda.
todoList.update((items) => {
items.pop();
return items;
});
Crear tiendas de solo lectura en Svelte
A veces, es posible que desees restringir el acceso de un componente a una tienda haciéndolo de solo lectura. Para ello, utilice el legible función.
import { readable } from 'svelte/store';export const todoList = readable([
"Read my books",
"Eat some foods",
"Bath the dogs",
"Take out the garbage",
"Water the flowers"
]);
El actualizar() El método no está disponible en valores de tienda legibles, por lo que algo como lo siguiente generará un error:
function removeLastItem() {
todoList.update((items) => {
items.pop();
return items;
});
}
Uso de tiendas con la API de contexto
Svelte tiene una API de contexto que puedes usar importando el establecerContexto función de la esbelto módulo:
import {setContext} from "svelte"
Para pasar datos de un componente principal a un componente secundario, puede hacer lo siguiente:
Este enfoque funciona bien, pero la API Context proporciona una forma para que los componentes se comuniquen entre sí sin transmitir datos. React proporciona una funcionalidad similar con el gancho useContext. Dado que Context en Svelte no es reactivo, debe pasar un valor de almacenamiento al contexto para que sea reactivo.
En el componente principal, podría tener lo siguiente:
El bloque de código anterior define una tienda y pasa la tienda al establecerContexto funcionan junto con una clave «edad». En Svelte, puede hacer referencia al valor de una tienda anteponiendo un «$» antes del nombre de la tienda.
Cualquier componente secundario ahora puede usar el valor de contexto de un componente principal, llamando al obtener contexto función y pasando la clave apropiada.
{$userAge}
Gestión estatal en Svelte vs. React
La gestión del estado en Svelte es mucho más simple que React: solo necesita un signo igual (=) para definir y actualizar el estado. En marcos web como React, necesitarías ganchos como usoEstado y usarreductor para manejar tareas más simples de gestión estatal.
Para compartir estados complejos entre componentes, puede utilizar la API React Context o bibliotecas externas como Redux y Zustand. En Svelte, prácticamente no hay necesidad de una biblioteca externa cuando se manejan estados complejos, porque Svelte Stores y Svelte Context API están ahí para hacer el trabajo por usted.