¿Por qué no funciona if? Compilación vs. ejecución

En la lección 2 usaste rx.cond en lugar de if, y en la lección 3, rx.foreach en lugar de for. Si esto es Python, ¿por qué no puedes usar la sintaxis de Python tal cual? En cuanto entiendas el motivo en esta lección, comprenderás de una vez por qué aparecen la mayoría de los errores que te encontrarás en Reflex.

4-1. Los dos momentos en que se ejecuta el código (3 min)

El código de una app Reflex se ejecuta en dos momentos distintos.

Al arrancar la app, las funciones de la interfaz se traducen a JavaScript y se envían al navegador. Durante la traducción todavía no se sabe qué usuario pulsará qué, así que el LoginState.logged_in que hay dentro de una función de la interfaz no es un True/False real, sino "un hueco que se rellenará más tarde en el navegador". Ese hueco es precisamente una Var.

En cambio, los manejadores de eventos no se traducen: se ejecutan en el servidor como Python normal. Por eso, dentro de un manejador puedes usar cualquier código o librería de Python.

4-2. Dentro del manejador, Python de verdad (2 min)

El siguiente manejador usa un if y además llama a una función definida fuera del State. Como se ejecuta en el servidor en tiempo de ejecución, no hay ningún problema.

def check_even(num: int):
    return num % 2 == 0


class MyState3(rx.State):
    count: int = 0
    text: str = "even"

    @rx.event
    def increment(self):
        # Use any Python code within state.
        # Even reference functions defined outside the state.
        if check_even(self.count):
            self.text = "even"
        else:
            self.text = "odd"
        self.count += 1


def count_and_check():
    return rx.box(
        rx.heading(MyState3.text, as_="h2"),
        rx.button("Increment", on_click=MyState3.increment),
    )

También puedes usar Python dentro de una función de la interfaz, pero solo con valores que ya se conocen en tiempo de compilación (es decir, que no usan state vars). El range(5) y el check_even(i) de abajo terminan de calcularse al arrancar la app.

def show_numbers():
    return rx.vstack(*[rx.text(f"{i} is {'even' if check_even(i) else 'odd'}") for i in range(5)])

4-3. Tres cosas que no funcionan en el código de la interfaz (2 min)

Como el valor de una state var no se conoce en tiempo de compilación, todo el código siguiente produce un error dentro de una función de la interfaz.

Evaluar el valor de una Var con if: aún no se sabe si es verdadero o falso. Lo mismo ocurre al elegir el valor de una prop.

class BadState(rx.State):
    count: int = 0


def count_if_even():
    return rx.box(
        rx.heading("Count: ", as_="h2"),
        # This will raise a compile error, as BadState.count is a var and not known at compile time.
        rx.text(BadState.count if BadState.count % 2 == 0 else "Odd"),
        # Using an if statement with a var as a prop will NOT work either.
        rx.text("hello", color="red" if BadState.count % 2 == 0 else "blue"),
    )

Recorrer una Var de tipo lista con for: aún no se sabe cuántos elementos tendrá.

class BadState(rx.State):
    items: list[str] = ["Apple", "Banana", "Cherry"]


def loop_over_list():
    return rx.box(
        # This will raise a compile error, as BadState.items is a list and not known at compile time.
        *[rx.text(item) for item in BadState.items]
    )

Pasar una Var a funciones de Python como len(): todavía no existe el string cuyos caracteres habría que contar.

class BadTextState(rx.State):
    text: str = "Hello world"


def format_text():
    return rx.box(
        # Python operations such as `len` will not work on state vars.
        rx.text(len(BadTextState.text)),
    )

4-4. La solución: operaciones de Var (3 min)

Entonces, ¿cómo mostramos en la interfaz "Even si es par, Odd si es impar"? Reflex ofrece operaciones de Var que puedes usar con las Var. Si aplicas operadores como %, == o > a una Var, el resultado también es una Var, y el cálculo real se hace en el navegador, una vez que llega el valor.

class CountEvenState(rx.State):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1


def count_if_even():
    return rx.box(
        rx.heading("Count: ", CountEvenState.count, as_="h2"),
        rx.cond(
            # Here we use the `%` and `==` var operations to check if the count is even.
            CountEvenState.count % 2 == 0,
            rx.text("Even"),
            rx.text("Odd"),
        ),
        rx.button("Increment", on_click=CountEvenState.increment),
    )

Ahora puedes resumir en una tabla por qué hacían falta las herramientas de las lecciones 1 a 3.

Ejercicios

1. Corrige el format_text de 4-3 para que muestre el número de caracteres. Pista: BadTextState.text.length().
2. En count_if_even, haz que aparezca "Big!" cuando count sea 10 o más. Pista: rx.cond(CountEvenState.count >= 10, ...).
3. Compara el enfoque de calcular dentro del manejador, como en MyState3, con el de usar operaciones de Var, como en CountEvenState. ¿Cuál necesita menos variables en el State?

Lista de comprobación de esta lección

• Sé explicar cuándo y dónde se ejecutan las funciones de la interfaz y los manejadores de eventos.
• Sé explicar por qué en el código de la interfaz no puedo usar if, for ni len() con state vars.
• Sé cómo conseguir lo mismo con operaciones de Var, rx.cond y rx.foreach.