useSignal

Enlace al repositorio

Este método, junto a useStorees uno de los métodos fundamentales de Qwik en cuanto a state management, sobre todo cuandos nos referimos a estados dinámicos.

En esta lección nos centraremos en useSignal y en la siguiente, en useStore.

Con useSignal podemos guardar un único valor de una variable. Se suele utilizar para los tipos primitivos, como boolean, string, o number/integer, aunque también puedes almacenar los datos de objecto simple, es decir, que no tiene varios niveles de profundidad. El método useSignal toma el valor inicial de dicha variable como argumento y devuelve lo que se denomina una reactive signal. Para acceder al valor de la variable, de la signal, debemos acceder a nombredelavariableelegida.value. En la documentación oficial de Qwik tienes el ejemplo típico del botón contador, pero aquí tienes un par de ejemplos menos prototípicos:

    // Path: src/routes/index.tsx
    import { component$, useSignal } from "@builder.io/qwik";
    
    export default component$(() => {
      const userName = useSignal("manuelsanchezweb");
      const isDinnerDone = useSignal(false);
    
      const translateBool = (value: boolean) => {
        return value ? "Sí" : "No";
      };
    
      return (
        <div>
          <h1>useSignal</h1>
          <div>
            <p>
              Nombre de la variable: <strong>{userName.value}</strong>.
            </p>
            <button onClick$={() => (isDinnerDone.value = !isDinnerDone.value)}>
              Cambiar estado de la cena
            </button>
            <button
              onClick$={() =>
                userName.value === "manuelsanchezweb"
                  ? (userName.value = "Paco")
                  : (userName.value = "manuelsanchezweb")
              }
            >
              Alternar entre Paco y manuelsanchezweb
            </button>
            <p>¿Está la cena hecha?: {isDinnerDone.value.toString()}</p>
            <p>¿Está la cena hecha?: {translateBool(isDinnerDone.value)}</p>
          </div>
        </div>
      );
    });
          

Como puedes ver en el código y en el vídeo, tenemos una par de signals y un par de funciones dentro de los onClick$ que nos permiten hacer un toggle entre los valores de las señales.

Si bien useSignal es muy entretenido y fácil de usar, cuando trabajamos con arrays o con objectos con varios niveles de profundidad, haremos mejor en utilizar useStore.