Introducción a los almacenes de texto legibles y escribibles en Svelte

Si está familiarizado con Redux o Vuex, las tiendas Svelte ofrecen una función similar para la gestión de estados. Si su aplicación se está volviendo complicada, entonces se vuelve difícil para los componentes transmitir datos entre ellos. Moverla a un almacén de datos global es una mejor opción. Aquí, veremos dos opciones de almacenamiento que Svelte pone a disposición:tiendas escribiblesytiendas legibles.

Tienda escribible

Sigamos adelante y creemos un archivo de gestión de estado global en nuestro proyecto Svelte: llamémoslo store.jse importemos la writablefunción.

import { writable } from "svelte/store";let counter = writable(1);export {counter}

Hemos creado una variable llamada counter, que es un almacén escribible. counterahora tiene los siguientes métodos autoexplicativos:

• set
• update

Creemos un componente personalizado llamado Nested.sveltey usemos la countertienda que acabamos de crear.

scriptimport { counter } from "./store.js";/scriptdiv counter value: {$counter}/div

Tenga en cuenta que durante el uso, anteponemos la variable con $, ya que se trata de una importación con nombre.

Terminemos importando el componente en el App.sveltearchivo y creando un método para escribir la countervariable para observar la reactividad en los componentes anidados.

scriptimport Nested from "./Nested.svelte";import { counter } from "./store.js";function incrementCounter() {  counter.update(n = n + 1);}/scriptdivbutton on_click={incrementCounter}Update/buttonNested //div

Utiliza counterun updatemétodo que toma una función cuyo parámetro es el valor actual del almacén de escritura y devuelve el valor modificado. Si ejecutamos esta aplicación, deberíamos poder ver Nestedcómo se actualiza el valor dentro del componente cuando hacemos clic en el botón.

Mientras estamos en eso, sigamos adelante y agreguemos un resetbotón a App.svelte.

function resetCounter() {  counter.set(1);}

button on_click={resetCounter}Reset/button

Utiliza resetCounterel setmétodo de nuestra tienda escribible.

Ahora, la writablefunción también admite un segundo argumento que también es una función. Aquí está la firma de esa función:

writable(value: any, (set: (value: any) = void) = () = void)

Esta función se activa cuando se crea el primer suscriptor y devuelve otra función que se activa cuando se destruye la última suscripción a la variable. Veamos cómo funciona.

En nuestro store.js, agregue el segundo argumento a la función escribible:

let counter = writable(1, () = {  console.log("First subscriber added!");  return () = {    console.log("Last subscriber deleted :(");  };});

Para probar esto, montaremos y desmontaremos el Nestedcomponente para observar el comportamiento, en App.svelte:

script// ...let flag = false;function toggleMount() {    flag = !flag;}/script  !-- ... --  button on_click={toggleMount}Mount/Unmount/button  {#if flag}    Nested /  {/if}/div

Tienda legible

Svelte también ofrece la readablefunción que permite crear almacenes legibles cuyos valores no se pueden actualizar desde otros componentes. El valor debe actualizarse setdesde dentro del almacén. Probemos esto, modificando el store.js-

import { readable } from "svelte/store";let initialVal = Math.floor(Math.random()*100);let counter = readable(initialVal, (set) = {  let incrementCounter = setInterval( () = {    let newVal = Math.floor(Math.random()*100);    set(newVal);  }, 1000);  return () = {    clearInterval(incrementCounter);  };});export {counter}

Aquí el readablecontador se configura con initialVal, que se pasa como primer argumento. El segundo argumento es el mismo que con los almacenes de escritura, pero esta vez es un parámetro obligatorio ya que sin él no habría otra forma de acceder al countervalor para restablecerlo.

En este ejemplo, generamos números aleatorios entre 0 y 100 y los asignamos countermediante el setmétodo. updateno está disponible. Esta es una demostración simple, pero en aplicaciones reales, las tiendas legibles pueden usar el segundo argumento para realizar llamadas a la API y, según cierta lógica, setel valor. Esto representará los componentes que están suscritos a esta tienda.

Como viste, al usar writabley readablealmacenar en Svelte, ¡podemos lograr una forma básica de gestión de estado global con bastante facilidad! ✨