useStore

Como hemos dicho en la lección anterior, este método es junto a useSignaluno de los métodos fundamentales de Qwik en cuanto a state management, sobre todo cuandos nos referimos a estados dinámicos. La diferencia con useSignal es que utilizamos useStore para almacenar datos, que llamaremos store, que pueden ser de cualquier tipo, normalmente más complejo que un simple valor, como puede ser un objeto con varios niveles de profundidad o un array.

Echémosle un vistazo al siguiente código y al vídeo en cuestión:

     // Path: src/routes/index.tsx
    import { component$, useStore } from "@builder.io/qwik";
    
    interface ShoppingListProps {
      fruits: { banana: number; apple: number; oranges: number };
      vegetables: { pepper: number; broccoli: number };
    }
    
    const sum = (a: number, b: number) => a + b;
    
    export default component$(() => {
      const shoppingListStore = useStore<ShoppingListProps>(
        {
          fruits: {
            banana: 6,
            apple: 1,
            oranges: 2,
          },
          vegetables: {
            pepper: 4,
            broccoli: 2,
          },
        },
        { deep: true }
      );
    
      return (
        <div>
          <h1>useStore</h1>
          <p>
            Con useStore podemos almacenar datos de variables más complejas,{" "}
            <strong>como pueden ser objetos anidados</strong>. En este caso, te
            presento mi lista de la compra ahora que estoy a dieta.
          </p>
          <div>
            <h2>Lista de la compra</h2>
            <p>
              Número de plátanos: <strong>{shoppingListStore.fruits.banana}</strong>
              .
            </p>
            <p>
              Número de manzanas: <strong>{shoppingListStore.fruits.apple}</strong>.
            </p>
            <p>
              Número de pimientos:{" "}
              <strong>{shoppingListStore.vegetables.pepper}</strong>.
            </p>
            <p>
              Número de brócolis:{" "}
              <strong>{shoppingListStore.vegetables.broccoli}</strong>.
            </p>
            <p>
              Total de verduras:{" "}
              <strong>
                {sum(
                  shoppingListStore.vegetables.pepper,
                  shoppingListStore.vegetables.broccoli
                )}
              </strong>
            </p>
            <button onClick$={() => shoppingListStore.vegetables.pepper++}>
              Añade un pimiento
            </button>
          </div>
        </div>
      );
    });
          

Como podemos ver, a la hora de declarar los valores del store, si vamos a utilizar más de un nivel de anidación, debemos pasarle deep: true como segundo argumento.

Los datos funcionan de forma reactiva, al igual que con useSignal, es decir, que al cambiar el valor de una propiedad del store, se actualizará automáticamente el valor en cualquier componente que utilice dicha variable.

A continuación vamos a ver una de las estrategias, también relacionada con state management, para hacer disponible una serie de variables y métodos en toda la aplicación.