Decorator Track en Salesforce

Compártelo con tus amigos!

Decorator Track en Salesforce nos ayudaba a hacer un campo reactivo. Actualmente, ya no es requerido en un Lightning Web Component.

En Lightning Web Component (LWC), el Decorator Track se utiliza para hacer un campo reactivo. Sin embargo, a veces se generan dudas sobre en qué casos se deben usar o no. Ahora, todos los campos de un componente son reactivos.

Esto quiere decir que, si el valor de un campo cambia el componente se vuelve a renderizar y muestra el nuevo valor.

¿Para qué sirve el Decorator Track en Salesforce?

• Los Decorators en LWC agregan una determinada funcionalidad a un campo o propiedad. El Decorator Track genera una reactividad privada.
• Reactivo significa que si hay un cambio en un campo o propiedad de JavaScript, el componente se volverá a procesar. Además, todas las expresiones utilizadas en la plantilla (template) se evaluarán una vez más.
• Un campo o propiedad privado, únicamente, se puede usar en el componente donde se ha definido.

¿Cómo se hacía reactivo un campo?

Antes de Salesforce Spring’20, se debía agregar la palabra reservada @track para convertir a un campo en reactivo. Por ejemplo:

@track nombre='';

¿Cómo se hace reactivo un campo ahora?

• Desde Salesforce Spring’20, todos los campos son reactivos. Por lo tanto, ya no es necesario agregar el Decorator Track en Salesforce.
• Si el valor de un campo cambia, el componente se va a renderizar y mostrará el valor actual del campo. También, sucede cuando el getter de una propiedad se utiliza en una plantilla.

Veamos un ejemplo. El siguiente componente tiene dos campos de entrada: nombre y apellido. Cuando se ingresa un nombre en cualquier campo, el componente lo convierte a mayúsculas y lo muestra.

<!-- helloExpressions.html -->

<template>
    <lightning-input
        name="firstName"
        label="First Name"
        onchange={handleChange}
    ></lightning-input>
    <lightning-input
        name="lastName"
        label="Last Name"
        onchange={handleChange}
    ></lightning-input>
    <p>
        Uppercased Full Name: {uppercasedFullName}
    </p>
</template>

Además, el componente ha sido definido con dos campos: FirstName y LastName. Cada vez que estos valores cambien, se actualizará el valor que retorna el getter. Por último, se mostrarán los valores actualizados.

// helloExpressions.js

import { LightningElement } from 'lwc';

export default class HelloExpressions extends LightningElement {
    firstName = '';
    lastName = '';

    handleChange(event) {
        const field = event.target.name;
        if (field === 'firstName') {
            this.firstName = event.target.value;
        } else if (field === 'lastName') {
            this.lastName = event.target.value;
        }
    }

    get uppercasedFullName() {
        return `${this.firstName} ${this.lastName}`.trim().toUpperCase();
    }
}

¿Cuándo usar el Decorator Track en Salesforce?

Se puede utilizar cuando un campo tiene como valor a un objeto o array.

Por ejemplo, declaremos un campo que se llame FullName. Este campo es un objeto que contiene dos propiedades: firstName y lastName.

fullName = { firstName : '', lastName : '' };

Si le asignamos un valor a fullName, LWC observa cambios que asignan un nuevo valor a fullName. Este código asigna un nuevo valor al campo fullName. Renderizando el componente nuevamente.

// Componente se renderiza.
this.fullName = { firstName : 'John', lastName : 'Doe' };

Sin embargo, si asignamos un nuevo valor a una de las propiedades del objeto, el componente no se vuelve a renderizar porque el cambio no se realiza.

// Component no se renderiza.
this.fullName.firstName = ‘Will’;

Para indicarle a LWC que observe los cambios en las propiedades del objeto, agregamos @track al field fullName. Ahora, si cambiamos cualquiera de las propiedades, el componente se vuelve a renderizar.

// Componente se renderiza.
@track fullName = { firstName : '', lastName : '' };
this.fullName.firstName = 'John';

Más Información

• Decorators – Developer Salesforce
• The Track Decorator Is No Longer Required for Lightning Web Components
• Decorators in Lightning Web Component(LWC)

Para saber más sobre Salesforce, puedes visitar nuestro último post sobre Tipos de Datos de Apex en Salesforce.

Compártelo con tus amigos!