Choisir un utilitaire

L'utilitaire pick simplifie le travail avec les états des objets en permettant de lire des valeurs de propriétés approfondies tout en conservant la réactivité des états.

Pourquoi utiliser l'utilitaire pick ?

Examinons un état d'objet utilisateur simple.

const [currentUser] = state(null)

Le modèle de données utilisateur ressemble à ceci :

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
        }
    }[]
}

Nous pouvons maintenant essayer d'afficher ces informations utilisateur définies dans l'état.

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)

Cela affiche tout parfaitement. Cependant, s'il s'agit d'un objet qui change, rien ne sera restitué car tout a été rendu de manière statique. La solution simple consiste à tout restituer dynamiquement à l’aide de fonctions.

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)

Vous pouvez également utiliser pick pour sélectionner les propriétés que vous souhaitez restituer à partir d'un état.

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)

L'utilitaire pick n'est qu'une fonction et peut également être utilisé en dehors des modèles.

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

Des valeurs profondes

La meilleure partie de l’utilisation de pick est sa capacité à vous permettre de sélectionner des valeurs approfondies. Par exemple, accédons au site Web de notre troisième entreprise d'emploi actuelle.

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

Comme vous pouvez le voir, vous pouvez utiliser la notation par points pour accéder en profondeur aux propriétés et tout sera restitué lorsque ces valeurs changeront.

Valeurs non définies

L'utilitaire pick offre également une protection contre les valeurs non définies en empêchant les erreurs de générer des erreurs lors de la tentative de lecture d'une propriété qui n'existe pas.

L'assistant pick détectera l'erreur et renvoie simplement undefined qui peut être rendu ou lu par votre code.

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

Fonction mappeur

L'utilitaire pick accepte un troisième argument facultatif : une fonction de mappage qui transforme la valeur sélectionnée avant de la renvoyer.

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

Ceci est utile pour formater des valeurs, convertir des types ou appliquer une transformation à la valeur sélectionnée avant qu'elle ne soit rendue ou utilisée.