Questo post è una rapida introduzione a un modo per mantenere il tuo codice Gutenberg conforme agli standard attuali utilizzando gli hook React. Vedremo come questo è vantaggioso, perché dovremmo farlo e come.
Eh, ganci?
Presumo che tu abbia già una certa esperienza di lavoro con blocchi o plug-in Gutenberg un po’ più complessi che interrogano i post o recuperano e aggiornano i meta dei post. E quindi ho lavorato con [withSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withSelect)e/o [withDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withDispatch). Si tratta di componenti di ordine superiore in WordPress che ti consentono di accedere ai negozi di WordPress per recuperare o inviare informazioni che sono un po’ al di fuori del "normale" blocco o modifica dei post. Probabilmente sei stato anche costretto a utilizzare composeper combinare i tuoi componente con più componenti di ordine superiore. Se il tuo codice utilizza questi modelli, non preoccuparti: funzionano perfettamente e continueranno a funzionare! Ma con l’avanzare della tecnologia, possiamo fare di meglio.
All’inizio del 2019, React ha lanciato hook (versione 16.8), che ti consentono di utilizzare lo stato senza utilizzare una classe e migliorare altre funzionalità che offrono codice più leggibile e riutilizzabile. Ad esempio, rimuovendo la necessità di avvolgere il codice in componenti di ordine superiore per accedere ai registri. E nell’estate 2019 WordPress è seguito, lanciando hook personalizzati: [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).
I vantaggi dei ganci sono molti. L’esempio più comune consente di utilizzare lo stato del componente senza dover scrivere una classe Javascript (useState). Ma secondo me il vantaggio più grande è la riutilizzabilità. Eliminando la necessità di utilizzare modelli come oggetti di scena e componenti di ordine superiore, i componenti possono essere scritti in parti molto più indipendenti. Un altro vantaggio degli hook è che semplifica la lettura e la comprensione del codice!
Passiamo subito ad alcuni esempi e vediamo come implementare useSelecte useDispatchhook nel nostro codice!
ImplementazioneuseSelect
Iniziamo con withSelecte il relativo hook useSelect. Questi sono usati per ottenere oggetti di scena derivati dallo stato da selettori registrati. Esempi comuni sono l’accesso ai selettori ‘ core‘ o ‘ core/editor‘ per eseguire query per i post (getEntityRecords), accedere ai meta dei post (getEditedPostAttribute) o semplicemente per ottenere il tipo di post corrente o altre informazioni.
A scopo dimostrativo inizierò con un semplice esempio. Supponiamo di avere un componente di blocco in cui ho un selettore di post da qualche parte. Per popolare le scelte dei post devo accedere al registro ‘ core‘ ed eseguire una GetEntityRecords()chiamata.
Usando alla vecchia manierawithSelect
Se voglio interrogare i post in un blocco, dovrei avvolgere il mio componente in withSelect. Questo è comunemente fatto nella exportdichiarazione.
Tieni presente che questo esempio di codice non è completo come un vero blocco funzionale o plug-in JS, è stato eliminato per mostrare solo i concetti fondamentali di withSelect. Se stai cercando esempi di codice pratici, ho altri articoli che trattano questo: ad esempio come implementare blocchi con un post select o come aggiungere post meta all’ispettore. Quelli sono scritti con withSelecte withDispatch, così fanno quelli, e poi torna qui per imparare a trasformarli in hook.
Come puoi vedere in linea #12-16avvolgo il mio componente con withSelect. All’interno della funzione withSelect posso accedere al negozio che voglio, e restituisco una query post nel prop ” somePosts“. Questo prop sarà quindi disponibile all’interno del mio AWP_Example_Plugincomponente (come puoi vedere destrutto somePostsdagli oggetti di scena in linea #3).
Come accennato in precedenza, questo metodo funziona perfettamente e continuerà a farlo. Ma ci sono diversi aspetti negativi di questo. Uno è che questo non è molto facile da capire. Certo, questo era un esempio molto semplice. A prima vista al componente stesso non sei sicuro da dove somePostsprovenga l’elica o cosa sia. Dovresti sapere per cercare l’istruzione di esportazione e vedere se ci sono dei wrapper. Sembra anche un po’ sconnesso. Fai una buona parte del lavoro importante al di fuori del tuo componente, per qualcosa che desideri effettivamente disponibile all’interno del tuo componente.
Facciamolo meglio usando i ganci.
Conversione inuseSelect
Convertire un withSelectin useSelectè semplicissimo. Il primo passo è che possiamo definire la variabile somePostsall’interno del nostro componente, piuttosto che all’esterno exportdall’istruzione. Il secondo passaggio è spostare l’intera funzione che avevamo withSelectin useSelect. E questo è tutto.
Il codice sopra fornisce lo stesso identico risultato di quello con withSelect. La differenza è che ora il codice è molto più comprensibile! Ora possiamo vedere molto facilmente che la variabile somePostssta memorizzando il risultato di una query post, proprio all’interno del nostro componente.
Nota importante: useSelectaccetta un secondo parametro; una serie di dipendenze. Le dipendenze sono variabili che assicurano l’esecuzione solo useSelectquando una delle dipendenze (valori di variabili) è cambiata. Questo bit è più importante useDispatchqui che qui, quindi lo spiegherò ulteriormente nella useDispatchsezione seguente.
ImplementazioneuseDispatch
Ora diamo un’occhiata a withDispatche al suo hook corrispondente useDispatch. Sono usati per inviare oggetti di scena ai registri. Ad esempio, dicendo a Gutenberg di aggiornare un meta post tramite ‘ core/editor‘.
Ancora una volta, a scopo dimostrativo, i miei esempi di codice non sono parti di codice funzionali complete: illustrano solo le parti relative a questi modelli. In questo esempio presumo di avere un campo di testo che mostra un meta post e desidero aggiornare il valore meta post in caso di modifica.
Usando alla vecchia manierawithDispatch
Poiché withDispatchè un componente di ordine superiore, avrei bisogno di avvolgere il mio componente all’interno di questo. Questo è comunemente fatto nella exportdichiarazione. Per creare il campo di testo per il nostro meta lavoro noi
Per esempio:
A riga #20-26avvolgiamo il componente all’interno withDispatch, in cui restituiamo una funzione " setPostMeta" che invia post meta (per aggiornarlo). At line #6destrutturiamo il prop in modo da poterlo utilizzare nell’evento del campo di testo onChangeat line #13. (Si noti che l’esempio sopra non sarebbe funzionale perché impostiamo il valore del campo di testo su una stringa vuota. Questo è solo per dimostrare come utilizzeremmo dispatch).
Ancora una volta possiamo vedere che il codice non è così semplice da capire. Dovresti sapere cercare l’involucro per capire qual setPostMetaè o da dove viene l’elica " ". Facciamolo meglio usando i ganci!
Conversione inuseDispatch
Cambiare withDispatchin useDispatchnon è così semplice come convertirsi withSelectin useSelect. Comunque è ancora abbastanza facile. Ci sono due cose da tenere a mente. Uno è che useDispatchprende il nome di un negozio come primo parametro. Quindi accediamo al negozio e chiamiamo le sue funzioni disponibili quando lo utilizziamo (ad esempio in un onChangeevento di un campo di testo). In secondo luogo, l’array di dipendenze al useDispatchsecondo parametro di ‘s è più importante di useSelect. Puoi rischiare che il tuo codice finisca in un ciclo infinito se non gestisci correttamente le dipendenze. Solo quando le variabili di dipendenza vengono modificate, lo script verrà eseguito nuovamente useDispatch.
Per esempio:
In linea #8destrutturiamo ciò di cui abbiamo bisogno dal negozio’ core/editor‘. Siamo interessati solo alla editPostfunzione che possiamo utilizzare per aggiornare il meta dei post. Come secondo parametro useDispatchforniamo le dipendenze. Come per un esempio di aggiornamento del meta meta, usare il valore del meta post (usando useSelect) sarebbe perfetto come dipendenza. In questo esempio l’ho appena impostato come variabile fittizia. Guarda più in basso per un esempio più completo e realistico. E poi alla riga dell’evento #16del campo di testo onChange, chiamiamo editPostper aggiornare il meta. Nota la differenza in questa riga con l’utilizzo withDispatchsopra! Poiché utilizziamo editPostdirettamente invece di restituire una funzione per aggiornare post meta per noi (setPostMeta), dobbiamo fornire un oggetto conmetacome chiave e quindi un oggetto con il meta meta che vogliamo aggiornare. Abbiamo un po’ diviso il withDispatchcodice in pezzi.
Tuttavia, l’utilizzo useDispatchrende il codice molto più leggibile e comprensibile. Niente più codice aggiunto al di fuori del nostro componente che dobbiamo usare all’interno.
Un esempio più completo ed eliminando la necessità dicompose
È probabile che se stai usando withDispatch, avrai bisogno withSelectanche di quel componente. Negli esempi per la conversione in useDispatchsopra stiamo aggiornando un valore meta post. Ma affinché il campo di testo funzioni correttamente (e mostri anche il valore corrente), dovremmo anche recuperare il meta valore post.
Se devi utilizzare più componenti di ordine superiore avvolti attorno al tuo componente, molto probabilmente utilizzerai un’altra funzione di Gutenberg; [compose](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-compose/). È una funzione utile per combinare più componenti di ordine superiore in un componente di ordine superiore su cui puoi avvolgere il tuo componente.
Diamo un’occhiata a un esempio più completo di un componente che recupera un meta valore di post in un campo di testo e si aggiorna quando il suo valore viene modificato. Iniziamo con il modo in cui dovremmo farlo usando withSelecte withDispatch(e quindi anche compose).
Usando withSelect, withDispatchecompose
In linea #21-34li componiamo withSelecte withDispatchli avvolgiamo attorno al nostro componente. postMetafrom withSelecte setPostMetafrom withDispatchsono ora disponibili nel nostro componente come oggetti di scena. Li destrutturiamo in linea #7e li usiamo in #13e #14.
Come puoi vedere, il codice necessario al di fuori del nostro componente è più lungo del componente stesso. Non so voi, ma per me sembra un po’ sconnesso. Gli sviluppatori possono iniziare a leggere questo codice dall’alto, senza vedere la parte inferiore, e iniziare a chiedersi da dove postMetae da dove setPostMetaprovengono: sembrano essere magicamente disponibili. Per me questo è molto poco intuitivo.
Diamo un’occhiata a come convertire l’esempio sopra in hook.
Usando useSelecteuseDispatch
Quanto è bello e leggibile?! Possiamo vedere immediatamente nel nostro componente postMetada dove viene recuperato e come accediamo a editPost. Il nostro componente è diventato anche molto più facile da riutilizzare.
Nota che in useDispatchlinea #12aggiungiamo il postmeta che stiamo aggiornando come dipendenza (postMeta.example_post_meta). Se dovessi mantenere aggiornate più meta variabili post in questo componente, dovresti aggiungerle ciascuna come dipendenza per assicurarti che la spedizione venga eseguita (salvando effettivamente la meta meta) quando il valore di una di esse cambia.
Spero che questo sia stato informativo e utile per qualcuno là fuori. Non ho ancora familiarità con i ganci, ma vedendo i vantaggi di usarli non tornerò indietro!