Cet article est une introduction rapide à un moyen de maintenir votre code Gutenberg aux normes actuelles en utilisant les crochets React. Nous verrons comment cela est bénéfique, pourquoi nous devrions le faire et comment.
Hein, crochets?
Je suppose que vous avez déjà une certaine expérience de travail avec des blocs ou des plugins Gutenberg un peu plus complexes qui interrogent les messages, ou récupèrent et mettent à jour les méta post. Et donc travaillé avec [withSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withSelect)et/ou [withDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withDispatch). Ce sont des composants d’ordre supérieur dans WordPress qui vous permettent d’accéder aux magasins WordPress afin de récupérer ou de pousser des informations un peu en dehors du bloc "normal" ou de la post-édition. Vous avez peut-être également été obligé d’utiliser composeafin de combiner votre composant avec plusieurs composants d’ordre supérieur. Si votre code utilise ces modèles, ne vous inquiétez pas : ils fonctionnent parfaitement et continueront de fonctionner ! Mais à mesure que la technologie progresse, nous pouvons faire mieux.
Début 2019, React a lancé des crochets (version 16.8) – qui vous permettent d’utiliser l’état sans utiliser de classe et d’améliorer d’autres fonctionnalités qui donnent un code plus lisible et réutilisable. Par exemple, en supprimant la nécessité d’envelopper votre code dans des composants d’ordre supérieur afin d’accéder aux registres. Et à l’été 2019, WordPress a suivi, en lançant des hooks personnalisés: [useDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useDispatch)et [useSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useSelect).
Les avantages des crochets sont nombreux. L’exemple le plus courant permet d’utiliser l’état du composant sans avoir à écrire une classe Javascript (useState). Mais à mon avis, le plus grand avantage est la réutilisabilité. En supprimant la nécessité d’utiliser des modèles tels que des accessoires de rendu et des composants d’ordre supérieur, les composants peuvent être écrits en morceaux beaucoup plus indépendants. Un autre avantage des crochets est qu’ils rendent votre code plus facile à lire et à comprendre !
Passons directement à quelques exemples et voyons comment implémenter useSelectet useDispatchcrocheter notre code !
ExécutionuseSelect
Commençons par withSelectet son crochet correspondant useSelect. Ceux-ci sont utilisés pour obtenir des accessoires dérivés de l’état à partir de sélecteurs enregistrés. Des exemples courants sont l’accès aux sélecteurs ‘ core‘ ou ‘ core/editor‘ afin d’effectuer des requêtes pour les publications (getEntityRecords), accéder à la méta des publications (getEditedPostAttribute) ou simplement obtenir le type de publication actuel ou d’autres informations.
À des fins de démonstration, je commencerai par un exemple simple. Supposons que j’ai un composant de bloc où j’ai un sélecteur de publication quelque part. Afin de remplir les choix de publication, j’ai besoin d’accéder au registre ‘ core‘ et d’effectuer un GetEntityRecords()appel.
Utilisation à l’anciennewithSelect
Si je veux interroger des publications dans un bloc, je devrais envelopper mon composant dans withSelect. Cela se fait couramment dans la exportdéclaration.
Veuillez noter que cet exemple de code n’est pas complet en tant que véritable bloc fonctionnel ou plug-in JS, il a été supprimé pour ne montrer que les concepts de base de withSelect. Si vous recherchez des exemples de code pratiques, j’ai d’autres articles qui traitent de cela: par exemple, comment implémenter des blocs avec un post select, ou comment ajouter post meta à l’inspector. Ceux-ci sont écrits avec withSelectet withDispatch, ceux-là aussi, puis revenez ici pour apprendre à les transformer en crochets.
Comme vous pouvez le voir en ligne #12-16, j’enveloppe mon composant avec withSelect. À l’intérieur de la fonction withSelect, je peux accéder au magasin que je veux et je renvoie une requête de publication dans la prop " somePosts". Cet accessoire sera alors disponible dans mon AWP_Example_Plugincomposant (comme vous pouvez le voir, je déstructure somePostsles accessoires à la ligne #3).
Comme mentionné précédemment, cette méthode fonctionne très bien – et continuera de le faire. Mais il y a plusieurs inconvénients à cela. La première est que ce n’est pas très facile à comprendre. Bien sûr, c’était un exemple très simple. À première vue, au composant lui-même, vous ne savez pas d’où somePostsvient l’accessoire ni de quoi il s’agit. Vous devez savoir rechercher la déclaration d’exportation et voir s’il y a des emballages. Il se sent aussi un peu décousu. Vous faites une bonne partie du travail important en dehors de votre composant, pour quelque chose que vous voulez réellement disponible à l’intérieur de votre composant.
Faisons mieux en utilisant des crochets.
Conversion enuseSelect
Convertir un withSelecten useSelectest aussi simple que possible. La première étape consiste à définir la variable à l’ somePostsintérieur de notre composant, plutôt qu’à l’extérieur par l’ exportinstruction. La deuxième étape consiste à déplacer toute la fonction que nous avions withSelectdans useSelect. Et c’est tout.
Le code ci-dessus fournit exactement le même résultat que celui avec withSelect. La différence est que le code est maintenant beaucoup plus compréhensible! Nous pouvons maintenant voir très facilement que la variable somePostsstocke le résultat d’une requête post, directement dans notre composant.
Note importante: useSelectaccepte un deuxième paramètre ; un tableau de dépendances. Les dépendances sont des variables qui garantissent que nous n’exécutons que useSelectlorsque l’une des dépendances (valeurs variables) a changé. Ce bit est plus important useDispatchqu’ici, donc je vais l’expliquer plus en détail dans la useDispatchsection ci-dessous.
ExécutionuseDispatch
Regardons maintenant withDispatchet son crochet correspondant useDispatch. Ils sont utilisés pour envoyer des props aux registres. Par exemple, dire à Gutenberg de mettre à jour une méta de publication via ‘ core/editor‘.
Encore une fois, à des fins de démonstration, mes exemples de code ne sont pas des morceaux de code fonctionnels complets – ils illustrent uniquement les parties concernant ces modèles. Dans cet exemple, je suppose que j’ai un champ de texte affichant une méta de publication – et je souhaite mettre à jour la valeur de la méta de publication en cas de modification.
Utilisation à l’anciennewithDispatch
Comme withDispatchil s’agit d’un composant d’ordre supérieur, j’aurais besoin d’envelopper mon composant à l’intérieur. Cela se fait couramment dans la exportdéclaration. Afin de faire fonctionner le champ de texte de notre méta, nous
Par exemple:
À la ligne, #20-26nous enveloppons le composant à l’intérieur withDispatchde, dans lequel nous renvoyons une fonction " setPostMeta" qui distribue la post méta (pour la mettre à jour). À la ligne, #6nous déstructurons le prop afin de pouvoir l’utiliser dans l’ onChangeévénement du champ de texte à la ligne #13. (Veuillez noter que l’exemple ci-dessus ne serait pas fonctionnel car nous avons défini la valeur du champ de texte sur une chaîne vide. C’est juste pour montrer comment nous utiliserions dispatch).
Encore une fois, nous pouvons voir que le code n’est pas aussi simple à comprendre. Vous devez savoir rechercher l’emballage afin de déterminer ce qu’est setPostMetaou d’où vient l’accessoire " ". Faisons mieux en utilisant des crochets !
Conversion enuseDispatch
Changer withDispatchen useDispatchn’est pas aussi simple que de se convertir withSelecten useSelect. C’est quand même assez facile. Il y a deux choses à garder à l’esprit. La première est que useDispatchprend un nom de magasin comme premier paramètre. Nous accédons alors au magasin et appelons ses fonctions disponibles lorsque nous l’utilisons (par exemple dans l’ onChangeévénement d’un champ de texte). Deuxièmement, le tableau des dépendances du useDispatchdeuxième paramètre de est plus important qu’avec useSelect. Vous pouvez risquer que votre code se retrouve dans une boucle éternelle si vous ne gérez pas correctement les dépendances. Ce n’est que lorsque les variables de dépendance sont modifiées que le script s’exécutera à nouveau useDispatch.
Par exemple:
Chez line #8on déstructure ce dont on a besoin du magasin ‘ core/editor‘. Nous ne sommes intéressés que par la editPostfonction que nous pouvons utiliser pour mettre à jour la méta post. Comme deuxième paramètre, useDispatchnous fournissons des dépendances. Comme pour un exemple de mise à jour de post meta, utiliser la valeur de post meta (en utilisant useSelect) serait parfait comme dépendance. Dans cet exemple, je viens de le définir comme une variable factice. Regardez plus bas pour un exemple plus complet et réaliste. Et puis à la ligne #16dans l’événement du champ de texte onChange, nous appelons editPostpour mettre à jour la méta. Notez la différence entre cette ligne et l’utilisation withDispatchci-dessus ! Puisque nous utilisons editPostdirectement au lieu de renvoyer une fonction pour mettre à jour la méta post pour nous (setPostMeta), nous devons fournir un objet avecmetacomme clé, puis un objet avec la méta post que nous voulons mettre à jour. Nous avons en quelque sorte divisé le withDispatchcode en morceaux.
Pourtant, l’utilisation useDispatchrend le code beaucoup plus lisible et compréhensible. Plus de code ajouté en dehors de notre composant que nous devons utiliser à l’intérieur.
Un exemple plus complet et éliminant le besoin decompose
Il y a de fortes chances que si vous utilisez withDispatch, vous aurez également besoin withSelectde ce composant. Dans les exemples de conversion ci- useDispatchdessus, nous mettons à jour une méta-valeur post. Mais pour que le champ de texte fonctionne correctement (et affiche également la valeur actuelle), nous aurions également besoin de récupérer la méta-valeur post.
Si vous avez besoin d’utiliser plusieurs composants d’ordre supérieur enroulés autour de votre composant, vous utiliserez très probablement une autre fonction Gutenberg ; [compose](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-compose/). C’est une fonction pratique pour combiner plusieurs composants d’ordre supérieur en un seul composant d’ordre supérieur autour duquel vous pouvez envelopper votre composant.
Regardons un exemple plus complet d’un composant qui récupère une méta-valeur post dans un champ de texte et se met à jour lorsque sa valeur est modifiée. Nous commençons par la façon dont nous devrions nous y prendre en utilisant withSelectet withDispatch(et donc aussi compose).
En utilisant withSelect, withDispatchetcompose
Chez line #21-34nous les composons withSelectet withDispatchles enroulons autour de notre composant. postMetafrom withSelectet setPostMetafrom withDispatchsont maintenant disponibles dans notre composant en tant qu’accessoires. Nous les déstructurons à la ligne #7et les utilisons dans #13et #14.
Comme vous pouvez le voir, le code nécessaire en dehors de notre composant est plus long que le composant lui-même. Je ne sais pas pour vous, mais pour moi, c’est un peu décousu. Les développeurs peuvent commencer à lire ce code par le haut, sans voir la partie inférieure, et commencer à se demander d’où postMetaet d’où setPostMetails viennent – ils semblent être disponibles comme par magie. Pour moi, c’est très peu intuitif.
Regardons comment nous convertirions l’exemple ci-dessus en crochets.
Utiliser useSelectetuseDispatch
Qu’est-ce que c’est beau et lisible ? ! Nous pouvons voir immédiatement dans notre composant postMetad’où est récupéré et comment nous avons accès à editPost. Notre composant est également devenu beaucoup plus facile à réutiliser.
Notez que dans la useDispatchligne #12nous ajoutons le postmeta que nous mettons à jour en tant que dépendance (postMeta.example_post_meta). Si vous deviez maintenir à jour plusieurs variables méta de publication dans ce composant, vous devrez ajouter chacune en tant que dépendance pour vous assurer que l’envoi s’exécute (en fait, en sauvegardant la méta de publication) lorsque la valeur de l’une d’entre elles change.
J’espère que cela a été instructif et utile pour quelqu’un. Je connais encore un peu mal les hameçons, mais voyant les avantages de les utiliser je ne reviens pas en arrière !