Seleccionar utilidad

La utilidad pick simplifica el trabajo con estados de objetos al permitirle leer valores de propiedad profundos mientras mantiene la reactividad de los estados.

¿Por qué utilizar la utilidad pick?

Veamos un estado de objeto de usuario simple.

javascript
const [currentUser] = state(null)

El modelo de datos de usuario se parece a esto:

typescript
interface User {
    name: string
    emails: string[]
    skils: {
        name: string
        yearsOfExperience: number
    }[]
    type: 'Admin' | 'User' | 'Partner'
    jobs: {
        name: string
        startingDate: Date
        endDate?: Date
        company: {
            name: string
            website: string
            logo: string
        }
    }[]
}

Ahora podemos intentar mostrar esta información de usuario que se configuró en el estado.

javascript
html`
    <h3>${currentUser().name}</h3>
    <p>email: ${currentUser().email}</h3>
    <h4>Skills:</h4>
    <ul>${repeat(currentUser().skills, renderSkil)}</ul>
    <h4>Jobs:</h4>
    <ul>${repeat(currentUser().jobs, renderJob)}</ul>
`.render(document.body)

Esto muestra todo perfectamente. Sin embargo, si se trata de un objeto que cambia, nada se volverá a representar porque todo se representó estáticamente. La solución simple es renderizar todo dinámicamente usando funciones.

javascript
html`
    <h3>${() => currentUser().name}</h3>
    <p>email: ${() => currentUser().email}</h3>
    <h4>Skills:</h4>
    <ul>${repeat(() => currentUser().skills, renderSkil)}</ul>
    <h4>Jobs:</h4>
    <ul>${repeat(() => currentUser().jobs, renderJob)}</ul>
`.render(document.body)

Alternativamente, puede usar pick para seleccionar las propiedades que desea representar desde un estado.

javascript
html`
    <h3>${pick(currentUser, 'name')}</h3>
    <p>email: ${pick(currentUser, 'email')}</h3>
    <h4>Skills:</h4>
    <ul>${repeat(pick(currentUser, 'skills'), renderSkil)}</ul>
    <h4>Jobs:</h4>
    <ul>${repeat(pick(currentUser, 'jobs'), renderJob)}</ul>
`.render(document.body)

La utilidad pick es sólo una función y también se puede utilizar fuera de las plantillas.

javascript
console.log(pick(currentUser, 'jobs')())

Valores profundos

La mejor parte de usar pick es su capacidad de permitirle elegir valores profundos. Por ejemplo, accedamos al sitio web de nuestra empresa de tercer empleo para usuarios actuales.

javascript
html`${pick(currentUser, 'jobs.2.company.website')}`

Como puede ver, puede usar notación de puntos para acceder a las propiedades en profundidad y todo se volverá a representar cuando estos valores cambien.

Valores indefinidos

La utilidad pick también ofrece protección contra valores indefinidos al evitar que se produzcan errores al intentar leer una propiedad que no existe.

El asistente pick detectará el error y simplemente devolverá undefined que su código puede representar o leer.

javascript
html`${pick(currentUser, 'jobs.2.company.url')}`.render(document.body)
// renders "undefined"

Función de mapeador

La utilidad pick acepta un tercer argumento opcional: una función de mapeo que transforma el valor seleccionado antes de devolverlo.

javascript
html`
    <h3>${pick(currentUser, 'name', (name) => name.toUpperCase())}</h3>
    <p>
        Member since:
        ${pick(currentUser, 'jobs.0.startingDate', (date) =>
            date.toLocaleDateString()
        )}
    </p>
`.render(document.body)

Esto es útil para formatear valores, convertir tipos o aplicar cualquier transformación al valor seleccionado antes de representarlo o usarlo.

<< oneOf, and y or
editar este documento