Gutenberg: Päivitys Select- ja withDispatchilla React Hooksiin (useSelect and useDispatch)
Tämä viesti on nopea johdatus tapaan pitää Gutenberg-koodisi nykyisten standardien tasolla React-koukkujen avulla. Katsotaan, kuinka tästä on hyötyä, miksi meidän pitäisi tehdä se ja miten.
Huh, koukut?
Oletan, että sinulla on jo kokemusta työskentelystä hieman monimutkaisempien Gutenberg-lohkojen tai -laajennusten kanssa, jotka kyselevät viestejä tai hakevat ja päivittävät postin metaa. Ja näin ollen työskennellyt [withSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withSelect)
ja/tai [withDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withDispatch)
. Nämä ovat korkeamman asteen komponentteja WordPressissä, joiden avulla voit käyttää WordPressin kauppoja hakeaksesi tai työntääksesi tietoja, jotka ovat hieman "normaalin" lohkon tai jälkeisen muokkauksen ulkopuolella. Olet ehkä joutunut käyttämään compose
sitä myös yhdistääksesi komponentti, jossa on useita korkeamman asteen komponentteja. Jos koodisi käyttää näitä malleja, älä huoli – ne toimivat täydellisesti ja toimivat edelleen! Mutta tekniikan kehittyessä voimme tehdä paremmin.
Alkuvuodesta 2019 React julkaisi koukut (versio 16.8) – joiden avulla voit käyttää tilaa ilman luokkaa ja parantaa muita ominaisuuksia, jotka tekevät koodista luettavamman ja uudelleenkäytettävän. Esimerkiksi poistamalla tarve kääriä koodi korkeamman asteen osiin päästäksesi rekistereihin. Ja kesällä 2019 seurasi WordPress lanseeraten mukautettuja koukkuja: [useDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useDispatch)
ja [useSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useSelect)
.
Koukuilla on monia etuja. Yleisin esimerkki on komponenttitilan käytön salliminen ilman Javascript-luokan (useState
) kirjoittamista. Mutta mielestäni suurin hyöty on uudelleenkäytettävyys. Poistamalla tarve käyttää kuvioita, kuten renderöintirekvisiittaa ja korkeamman asteen komponentteja, komponentit voidaan kirjoittaa paljon itsenäisemmiksi osiksi. Toinen koukkujen etu on, että se tekee koodistasi helpompi lukea ja ymmärtää!
Siirrytäänpä suoraan esimerkkeihin ja katsotaan, kuinka koodimme toteutetaan useSelect
ja useDispatch
kiinnitetään!
ToteutususeSelect
Aloitetaan withSelect
ja sitä vastaava koukku useSelect
. Näitä käytetään hankkimaan tilasta peräisin olevia rekvisiitta rekisteröidyiltä valitsijoilta. Yleisiä esimerkkejä ovat valitsimien ‘ core
‘ tai ‘ core/editor
‘ käyttäminen kyselyjen tekemiseksi viesteille (getEntityRecords
), viestin metasisällön käyttäminen (getEditedPostAttribute
) tai yksinkertaisesti nykyisen viestityypin tai muiden tietojen hankkiminen.
Esittelytarkoituksessa aloitan yksinkertaisella esimerkillä. Oletetaan, että minulla on lohkokomponentti, jossa minulla on jossain viestien valitsin. Viestivaihtoehtojen täyttämiseksi minun on käytettävä rekisteriä core
ja suoritettava GetEntityRecords()
puhelu.
Vanha tapa käyttääwithSelect
Jos haluan kysellä lohkon viesteistä, minun on käärittävä komponentti withSelect
. Tämä tehdään yleensä export
lausunnossa.
Huomaa, että tämä koodiesimerkki ei ole täydellinen varsinaisena toiminnallisena lohkona tai JS-laajennuksena, vaan se on poistettu, jotta se näyttää vain sovelluksen ydinkäsitteet withSelect
. Jos etsit käytännön koodiesimerkkejä, minulla on muita artikkeleita, jotka kattavat tämän: esim . kuinka toteuttaa lohkoja post select -toiminnolla tai kuinka lisätä post-meta tarkastajaan. Ne on kirjoitettu merkinnöillä withSelect
ja withDispatch
, niin tee nekin, ja palaa sitten tänne oppimaan, kuinka ne muunnetaan koukkuiksi.
Kuten rivistä näkyy, #12-16
käännän komponenttini withSelect
. WithSelect-toiminnon sisällä pääsen haluamaani kauppaan ja palautan viestikyselyn " somePosts
". Tämä rekvisiitta on sitten saatavilla AWP_Example_Plugin
komponentissani (kuten näette, että destructure somePosts
from rekvisiitta linjalla #3
).
Kuten aiemmin mainittiin, tämä menetelmä toimii hienosti – ja toimii jatkossakin. Mutta tässä on useita huonoja puolia. Yksi on, että tätä ei ole kovin helppo ymmärtää. Toki tämä oli hyvin yksinkertainen esimerkki. Ensi silmäyksellä itse komponentista et ole varma, mistä potkuri somePosts
tulee tai mikä se on. Sinun pitäisi osata etsiä vientilausuntoa ja katsoa, onko siinä kääreitä. Se tuntuu myös hieman hajaantuneelta. Teet melkoisen osan tärkeästä työstä komponentin ulkopuolella, johonkin, jonka haluat todella saatavan komponentin sisällä.
Tehdään se paremmin koukkujen avulla.
Muunnetaan muotoonuseSelect
Muuntaminen withSelect
osaksi useSelect
on niin yksinkertaista kuin se voi olla. Ensimmäinen askel on, että voimme määrittää muuttujan somePosts
komponenttimme sisällä sen sijaan, että se olisi export
lauseen ulkopuolella. Toinen vaihe on siirtää koko toiminto, joka meillä withSelect
oli useSelect
. Ja siinä se.
Yllä oleva koodi tarjoaa täsmälleen saman tuloksen kuin koodi, jossa on withSelect
. Erona on, että koodi on nyt paljon ymmärrettävämpi! Voimme nyt hyvin helposti nähdä, että muuttuja somePosts
tallentaa viestikyselyn tuloksen suoraan komponenttiimme.
Tärkeä huomautus: useSelect
hyväksyy toisen parametrin; joukko riippuvuuksia. Riippuvuudet ovat muuttujia, jotka varmistavat, että suoritamme vain, useSelect
kun jokin riippuvuuksista (muuttujien arvoista) on muuttunut. Tämä osa on tärkeämpi useDispatch
kuin täällä, joten selitän tätä hieman tarkemmin alla olevassa useDispatch
osiossa.
ToteutususeDispatch
Katsotaanpa nyt withDispatch
ja sitä vastaavaa koukkua useDispatch
. Niitä käytetään rekvisiitin lähettämiseen rekistereihin. Esimerkiksi käskemällä Gutenbergiä päivittämään viestimeta " core/editor
" kautta.
Jälleen esittelytarkoituksessa koodiesimerkit eivät ole täydellisiä toiminnallisia koodinpätkiä – ne kuvaavat vain näitä malleja koskevia osia. Tässä esimerkissä oletetaan, että minulla on tekstikenttä, joka näyttää post-meta – ja haluan päivittää post meta -arvon muutoksen yhteydessä.
Vanha tapa käyttääwithDispatch
Kuten withDispatch
korkeamman asteen komponentti, minun on käärittävä komponentti tämän sisään. Tämä tehdään yleensä export
lausunnossa. Saadaksemme tekstikentän metallemme toimimaan me
Esimerkiksi:
Rivillä #20-26
käärimme komponentin sisälle withDispatch
, jossa palautetaan funktio " setPostMeta
", joka lähettää post metan (päivittääksesi sen). Rivillä #6
puretaan prop, jotta voimme käyttää sitä tekstikentän onChange
tapahtumassa rivillä #13
. (Huomaa, että yllä oleva esimerkki ei toimi, koska asetamme tekstikentän arvon tyhjäksi merkkijonoksi. Tämä on vain havainnollistaaksesi, kuinka käyttäisimme lähetystä).
Jälleen voimme nähdä, että koodi ei ole niin yksinkertaista ymmärtää. Sinun pitäisi osata etsiä käärettä selvittääksesi, mikä rekvisiitta " setPostMeta
" on tai mistä se tulee. Tehdään se paremmin koukkujen avulla!
Muunnetaan muotoonuseDispatch
Muuttaminen muotoon ei ole aivan yhtä yksinkertaista kuin withDispatch
muuntaminen muotoon. Se on silti melko helppoa. On kaksi asiaa, jotka on pidettävä mielessä. Yksi on se, että ensimmäisenä parametrina käytetään kaupan nimeä. Tämän jälkeen pääsisimme kauppaan ja kutsuisimme sen käytettävissä olevia toimintoja, kun käytämme sitä (esim. tekstikentän tapahtumassa). Toiseksi riippuvuuksien joukko toiseen parametriin on tärkeämpi kuin. Voit vaarantaa koodisi päätyvän ikuiseen silmukkaan, jos et hallitse riippuvuuksia oikein. Vain kun riippuvuusmuuttujia muutetaan, komentosarja suoritetaan uudelleen .useDispatch``withSelect``useSelect``useDispatch``onChange``useDispatch``useSelect``useDispatch
Esimerkiksi:
Linjalla #8
tuhoamme sen, mitä tarvitsemme kaupasta ‘ core/editor
‘. Meitä kiinnostaa vain editPost
toiminto, jolla voimme päivittää post metan. Toisena parametrina useDispatch
tarjoamme riippuvuudet. Mitä tulee esimerkkiin post metan päivittämisestä, post-meta-arvon käyttäminen (käyttämällä useSelect
) olisi täydellinen riippuvuutena. Tässä esimerkissä olen vain asettanut sen valemuuttujaksi. Katso alempana kattavampi ja realistisempi esimerkki. Ja sitten #16
tekstikentän onChange
tapahtuman rivillä soitamme editPost
päivittääksemme metan. Huomaa ero tässä rivissä withDispatch
yllä olevan käytön kanssa! Koska käytämme editPost
suoraan funktion palauttamisen sijaan päivittääksemme post-meta meille (setPostMeta
), meidän on annettava objektimeta
avaimena ja sitten objekti, jonka post-meta haluamme päivittää. Olemme tavallaan jakaneet withDispatch
koodin osiin.
Silti käyttö useDispatch
tekee koodista paljon luettavamman ja ymmärrettävämmän. Komponenttimme ulkopuolelle ei enää lisätä koodia, jota meidän tarvitsee käyttää sisällä.
Täydellisempi esimerkki ja poistava tarvecompose
On mahdollista, että jos käytät withDispatch
, tarvitset withSelect
myös kyseisessä komponentissa. Yllä olevissa esimerkeissä useDispatch
päivitämme post-meta-arvon. Mutta jotta tekstikenttä toimisi oikein (ja näyttää myös nykyisen arvon), meidän on myös noudettava post-meta-arvo.
Jos sinun on käytettävä useita korkeamman asteen komponentteja komponentin ympärille, käyttäisit todennäköisesti vielä toista Gutenberg-toimintoa; [compose](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-compose/)
. Se on kätevä toiminto yhdistää useita korkeamman asteen komponentteja yhdeksi korkeamman asteen komponentiksi, jonka ympärille voit kääriä komponentin.
Katsotaanpa täydellisempää esimerkkiä komponentista, joka hakee post-meta-arvon tekstikenttään ja päivittää, kun sen arvoa muutetaan. Aloitamme siitä, kuinka meidän pitäisi tehdä se käyttämällä withSelect
ja withDispatch
(ja siten myös compose
).
Käyttämällä withSelect
, withDispatch
jacompose
Linjalla #21-34
laadimme withSelect
ja withDispatch
käärimme ne komponenttimme ympärille. postMeta
alkaen withSelect
ja setPostMeta
alkaen withDispatch
ovat nyt saatavilla komponentissamme rekvisiittana. Puramme ne linjalla #7
ja käytämme niitä #13
ja #14
.
Kuten näette, komponenttimme ulkopuolella tarvittava koodi on pidempi kuin itse komponentti. En tiedä teistä, mutta minusta se tuntuu hieman hajaantuneelta. Kehittäjät voivat alkaa lukea tätä koodia ylhäältä näkemättä alaosaa ja alkaa ihmetellä, mistä postMeta
ja setPostMeta
mistä ne tulevat – ne näyttävät olevan taianomaisesti saatavilla. Minulle tämä on hyvin epäintuitiivista.
Katsotaanpa, kuinka muuttaisimme yllä olevan esimerkin koukkuiksi.
Käyttämällä useSelect
jauseDispatch
Kuinka kaunista ja luettavaa se on?! Näemme komponentistamme heti, mistä postMeta
se haetaan ja miten pääsemme käyttämään editPost
. Komponenttimme on myös paljon helpompi käyttää uudelleen.
Huomaa, että useDispatch
riville #12
lisäämme päivitettävän postmeta-tiedoston riippuvuudeksi (postMeta.example_post_meta
). Jos haluat pitää useita post-metamuuttujia ajan tasalla tässä komponentissa, sinun on lisättävä jokainen riippuvuutena varmistaaksesi, että lähetys suoritetaan (todellisuudessa tallentaa post-meta), kun yhden niistä arvo muuttuu.
Toivottavasti tämä on ollut informatiivinen ja hyödyllinen jollekin siellä olevalle. Koukut ovat minulle vielä vähän tuntemattomia, mutta nähdessäni niiden käytön edut en käänny takaisin!