Escolha o utilitário

O utilitário pick simplifica o trabalho com estados de objetos, permitindo a leitura profunda de valores de propriedades enquanto mantém a reatividade dos estados.

Por que usar o utilitário pick?

Vejamos um estado de objeto de usuário simples.

javascript
const [currentUser] = state(null)

O modelo de dados do usuário é mais ou menos assim:

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

Agora podemos tentar exibir essas informações do usuário que foram definidas no 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)

Isso mostra tudo perfeitamente. No entanto, se este for um objeto que muda, nada será renderizado novamente porque tudo foi renderizado estaticamente. A solução simples é renderizar tudo dinamicamente usando funções.

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)

Como alternativa, você pode usar pick para escolher as propriedades que deseja renderizar de um 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)

O utilitário pick é apenas uma função e também pode ser usado fora dos modelos.

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

Valores profundos

A melhor parte de usar o pick é sua capacidade de permitir que você escolha valores profundos. Por exemplo, vamos acessar o site de nossa empresa de terceiro emprego de usuário atual.

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

Como você pode ver, você pode usar notação de ponto para acessar profundamente as propriedades e tudo será renderizado novamente quando esses valores mudarem.

Valores indefinidos

O utilitário pick também oferece proteção contra valores indefinidos, evitando que ocorram erros ao tentar ler uma propriedade que não existe.

O auxiliar pick detectará o erro e simplesmente retornará undefined que pode ser renderizado ou lido pelo seu código.

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

Função mapeadora

O utilitário pick aceita um terceiro argumento opcional - uma função mapeadora que transforma o valor escolhido antes de retorná-lo.

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)

Isso é útil para formatar valores, converter tipos ou aplicar qualquer transformação ao valor escolhido antes de ser renderizado ou usado.

<< oneOf, and e or
editar este documento