...
✅ Notícias, temas e plug-ins da WEB e do WordPress. Aqui compartilhamos dicas e as melhores soluções para sites.

Gutenberg: Atualizando withSelect e withDispatch em React Hooks (useSelect e useDispatch)

20

Este post é uma introdução rápida sobre uma maneira de manter seu código Gutenberg nos padrões atuais usando ganchos React. Veremos como isso é benéfico, por que devemos fazê-lo e como.

Hein, ganchos?

Suponho que você já tenha alguma experiência trabalhando com blocos ou plugins Gutenberg um pouco mais complexos que consultam postagens, ou buscam e atualizam o meta do post. E assim trabalhando com [withSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withSelect)e/ou [withDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withDispatch). Estes são componentes de ordem superior no WordPress que permitem que você acesse as lojas do WordPress para buscar ou enviar informações que estão um pouco fora do bloco "normal" ou da edição de posts. Você possivelmente também foi forçado a usar composepara combinar seus componente com vários componentes de ordem superior. Se seu código estiver usando esses padrões, não se preocupe – eles funcionam perfeitamente bem e continuarão a funcionar! Mas à medida que a tecnologia avança, podemos fazer melhor.

No início de 2019, o React lançou hooks (versão 16.8) – que permitem usar o estado sem usar uma classe e melhorar outros recursos que fornecem um código mais legível e reutilizável. Por exemplo, removendo a necessidade de envolver seu código em componentes de ordem superior para acessar os registros. E no verão de 2019 o WordPress seguiu, lançando ganchos personalizados: [useDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useDispatch)e [useSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useSelect).

Os benefícios dos ganchos são muitos. O exemplo mais comum é permitir usar o estado do componente sem ter que escrever uma classe Javascript (useState). Mas, na minha opinião, o maior benefício é a reutilização. Ao remover a necessidade de usar padrões como props de renderização e componentes de ordem superior, os componentes podem ser escritos em partes muito mais independentes. Outro benefício dos ganchos é que eles tornam seu código mais fácil de ler e entender!

Vamos pular direto para alguns exemplos e ver como implementar useSelecte useDispatchganchos em nosso código!

ImplementaçãouseSelect

Vamos começar com withSelecte seu gancho correspondente useSelect. Eles são usados ​​para obter props derivadas de estado de seletores registrados. Exemplos comuns são acessar os seletores ‘ core‘ ou ‘ core/editor‘ para realizar consultas de postagens (getEntityRecords), acessar o meta do post (getEditedPostAttribute) ou simplesmente obter o tipo de postagem atual ou outras informações.

Para fins de demonstração, começarei com um exemplo simples. Suponha que eu tenha um componente de bloco onde eu tenha um seletor de postagem em algum lugar. Para preencher as opções de postagem preciso acessar o registro ‘ core‘ e realizar uma GetEntityRecords()chamada.

Maneira antiga usandowithSelect

Se eu quiser consultar postagens em um bloco, precisaria envolver meu componente em withSelect. Isso é comumente feito na exportdeclaração.

Observe que este exemplo de código não está completo como um bloco funcional real ou plug-in JS, ele foi removido apenas para mostrar os conceitos principais do withSelect. Se você estiver procurando por exemplos práticos de código, tenho outros artigos que abordam isso: por exemplo , como implementar blocos com um post select, ou como adicionar post meta ao inspector. Esses são escritos com withSelecte withDispatch, assim como aqueles, e depois volte aqui para aprender como transformá-los em ganchos.

Como você pode ver na linha, #12-16eu envolvo meu componente com withSelect. Dentro da função withSelect posso acessar a loja que quero, e retorno uma consulta post na prop ” somePosts“. Esta prop estará então disponível dentro do meu AWP_Example_Plugincomponente (como você pode ver, eu destruo somePostsas props em line #3).

Como mencionado anteriormente, esse método funciona muito bem – e continuará a fazê-lo. Mas há várias desvantagens com isso. Uma é que isso não é muito fácil de entender. Claro, este foi um exemplo muito simples. À primeira vista, no próprio componente, você não tem certeza de onde somePostsvem o suporte ou o que é. Você teria que saber para procurar a instrução de exportação e ver se há algum wrapper. Também se sente um pouco desconexo. Você faz uma grande parte do trabalho importante fora do seu componente, para algo que você realmente deseja disponível dentro do seu componente.

Vamos fazê-lo melhor usando ganchos.

Convertendo emuseSelect

Converter um withSelectem useSelecté o mais simples possível. O primeiro passo é que podemos definir a variável somePostsdentro do nosso componente, ao invés de fora pela exportdeclaração. O segundo passo é mover toda a função que tínhamos withSelectpara o useSelect. E é isso.

O código acima fornece exatamente o mesmo resultado que aquele com withSelect. A diferença é que o código agora é muito mais compreensível! Agora podemos ver muito facilmente que a variável somePostsestá armazenando o resultado de uma consulta post, bem dentro do nosso componente.

Nota importante: useSelectaceita um segundo parâmetro; uma série de dependências. As dependências são variáveis ​​que garantem a execução apenas useSelectquando uma das dependências (valores de variável) for alterada. Este bit é mais importante do useDispatchque aqui, então vou explicar este bit mais na useDispatchseção abaixo.

ImplementaçãouseDispatch

Agora vamos ver withDispatche seu gancho correspondente useDispatch. Eles são usados ​​para enviar adereços para registros. Por exemplo, dizendo ao Gutenberg para atualizar uma meta de postagem via ‘ core/editor‘.

Novamente, para fins de demonstração, meus exemplos de código não são partes funcionais completas de código – eles ilustram apenas as partes relacionadas a esses padrões. Neste exemplo, suponho que tenho um campo de texto mostrando uma meta de postagem – e desejo atualizar o valor meta da postagem na alteração.

Maneira antiga usandowithDispatch

Como withDispatché um componente de ordem superior, eu precisaria envolver meu componente dentro disso. Isso é comumente feito na exportdeclaração. Para fazer o campo de texto para o nosso meta-trabalho,

Por exemplo:

Na linha #20-26envolvemos o componente dentro withDispatchde, no qual retornamos uma função ” setPostMeta" que despacha o post meta (para atualizá-lo). Na linha #6nós desestruturamos a prop para que possamos usá-la no onChangeevento do campo de texto na linha #13. (Observe que o exemplo acima não seria funcional porque definimos o valor do campo de texto como uma string vazia. Isso é apenas para demonstrar como usaríamos o dispatch).

Novamente, podemos ver que o código não é tão simples de entender. Você teria que saber procurar o wrapper para descobrir o que o prop ” setPostMeta” é ou de onde vem. Vamos fazer melhor usando ganchos!

Convertendo emuseDispatch

Mudar withDispatchpara useDispatchnão é tão simples quanto converter withSelectpara useSelect. Ainda é muito fácil embora. Há duas coisas para manter em mente. Uma é que useDispatchleva um nome de loja como primeiro parâmetro. Nós então acessaríamos a loja e chamaríamos suas funções disponíveis quando a usarmos (por exemplo, em um onChangeevento de campo de texto). Em segundo lugar, a matriz de dependências do useDispatchsegundo parâmetro de é mais importante do que com useSelect. Você pode arriscar que seu código acabe em um loop eterno se não gerenciar as dependências corretamente. Somente quando as variáveis ​​de dependência forem alteradas, o script será executado novamente useDispatch.

Por exemplo:

Na linha #8desestruturamos o que precisamos da loja’ core/editor‘. Estamos interessados ​​apenas na editPostfunção que podemos usar para atualizar o post meta. Como segundo parâmetro para useDispatchfornecermos dependências. Quanto a um exemplo de atualização do post meta, usar o valor do post meta (usando useSelect) seria perfeito como dependência. Neste exemplo, acabei de defini-lo como uma variável fictícia. Olhe mais para baixo para um exemplo mais completo e realista. E então na linha #16do evento do campo de texto onChange, chamamos editPostpara atualizar o meta. Observe a diferença nesta linha com o uso withDispatchacima! Como usamos editPostdiretamente em vez de retornar uma função para atualizar post meta para nós (setPostMeta), precisamos fornecer um objeto commetacomo chave e depois um objeto com a meta do post que queremos atualizar. Nós meio que dividimos o withDispatchcódigo em pedaços.

Ainda assim, o uso useDispatchtorna o código muito mais legível e compreensível. Não há mais código adicionado fora do nosso componente que precisamos usar dentro.

Um exemplo mais completo e eliminando a necessidade decompose

Provavelmente, se você estiver usando withDispatch, precisará withSelectdesse componente também. Nos exemplos para conversão useDispatchacima, estamos atualizando um valor meta post. Mas para que o campo de texto funcione corretamente (e também mostre o valor atual), também precisaríamos buscar o valor meta do post.

Se você precisar usar vários componentes de ordem superior agrupados em seu componente, provavelmente usará outra função do Gutenberg; [compose](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-compose/). É uma função útil para combinar vários componentes de ordem superior em um componente de ordem superior que você pode envolver seu componente.

Vejamos um exemplo mais completo de um componente que busca um meta valor de postagem em um campo de texto e atualiza quando seu valor é alterado. Começamos com como teríamos que fazer isso usando withSelecte withDispatch(e, portanto, também compose).

Usando withSelect, withDispatchecompose

Na linha #21-34, compomos withSelecte withDispatchos envolvemos em torno de nosso componente. postMetafrom withSelecte setPostMetafrom withDispatchestão agora disponíveis em nosso componente como adereços. Nós os desestruturamos na linha #7e os usamos em #13e #14.

Como você pode ver, o código necessário fora do nosso componente é maior que o próprio componente. Não sei quanto a você, mas para mim parece um pouco desconexo. Os desenvolvedores podem começar a ler esse código de cima, sem ver a parte de baixo, e começar a se perguntar de onde postMetae de onde setPostMetavêm – eles parecem estar magicamente disponíveis. Para mim isso é muito pouco intuitivo.

Vejamos como converteríamos o exemplo acima em ganchos.

Usando useSelecteuseDispatch

Quão bonito e legível é isso?! Podemos ver imediatamente em nosso componente postMetade onde é obtido e como obtemos acesso ao editPost. Nosso componente também ficou muito mais fácil de reutilizar.

Observe que na useDispatchlinha at #12adicionamos o postmeta que estamos atualizando como dependência (postMeta.example_post_meta). Se você mantivesse várias variáveis ​​meta do post atualizadas neste componente, você teria que adicionar cada uma como uma dependência para garantir que o dispatch seja executado (na verdade salvando o meta do post) quando o valor de uma delas for alterado.

Espero que isso tenha sido informativo e útil para alguém lá fora. Ainda não estou familiarizado com os ganchos, mas vendo os benefícios de usá-los não vou voltar atrás!

Fonte de gravação: awhitepixel.com

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação