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 composesitä 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 useSelectja useDispatchkiinnitetään!

ToteutususeSelect

Aloitetaan withSelectja 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ä coreja 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ä exportlausunnossa.

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ä withSelectja withDispatch, niin tee nekin, ja palaa sitten tänne oppimaan, kuinka ne muunnetaan koukkuiksi.

Kuten rivistä näkyy, #12-16käännän komponenttini withSelect. WithSelect-toiminnon sisällä pääsen haluamaani kauppaan ja palautan viestikyselyn " somePosts". Tämä rekvisiitta on sitten saatavilla AWP_Example_Pluginkomponentissani (kuten näette, että destructure somePostsfrom 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 somePoststulee 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 withSelectosaksi useSelecton niin yksinkertaista kuin se voi olla. Ensimmäinen askel on, että voimme määrittää muuttujan somePostskomponenttimme sisällä sen sijaan, että se olisi exportlauseen ulkopuolella. Toinen vaihe on siirtää koko toiminto, joka meillä withSelectoli 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 somePoststallentaa viestikyselyn tuloksen suoraan komponenttiimme.

Tärkeä huomautus: useSelecthyväksyy toisen parametrin; joukko riippuvuuksia. Riippuvuudet ovat muuttujia, jotka varmistavat, että suoritamme vain, useSelectkun jokin riippuvuuksista (muuttujien arvoista) on muuttunut. Tämä osa on tärkeämpi useDispatchkuin täällä, joten selitän tätä hieman tarkemmin alla olevassa useDispatchosiossa.

ToteutususeDispatch

Katsotaanpa nyt withDispatchja 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 withDispatchkorkeamman asteen komponentti, minun on käärittävä komponentti tämän sisään. Tämä tehdään yleensä exportlausunnossa. Saadaksemme tekstikentän metallemme toimimaan me

Esimerkiksi:

Rivillä #20-26käärimme komponentin sisälle withDispatch, jossa palautetaan funktio " setPostMeta", joka lähettää post metan (päivittääksesi sen). Rivillä #6puretaan prop, jotta voimme käyttää sitä tekstikentän onChangetapahtumassa 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 withDispatchmuuntaminen 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 #8tuhoamme sen, mitä tarvitsemme kaupasta ‘ core/editor‘. Meitä kiinnostaa vain editPosttoiminto, jolla voimme päivittää post metan. Toisena parametrina useDispatchtarjoamme 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 #16tekstikentän onChangetapahtuman rivillä soitamme editPostpäivittääksemme metan. Huomaa ero tässä rivissä withDispatchyllä olevan käytön kanssa! Koska käytämme editPostsuoraan funktion palauttamisen sijaan päivittääksemme post-meta meille (setPostMeta), meidän on annettava objektimetaavaimena ja sitten objekti, jonka post-meta haluamme päivittää. Olemme tavallaan jakaneet withDispatchkoodin osiin.

Silti käyttö useDispatchtekee 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 withSelectmyös kyseisessä komponentissa. Yllä olevissa esimerkeissä useDispatchpä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ä withSelectja withDispatch(ja siten myös compose).

Käyttämällä withSelect, withDispatchjacompose

Linjalla #21-34laadimme withSelectja withDispatchkäärimme ne komponenttimme ympärille. postMetaalkaen withSelectja setPostMetaalkaen withDispatchovat nyt saatavilla komponentissamme rekvisiittana. Puramme ne linjalla #7ja käytämme niitä #13ja #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ä postMetaja setPostMetamistä 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ä useSelectjauseDispatch

Kuinka kaunista ja luettavaa se on?! Näemme komponentistamme heti, mistä postMetase haetaan ja miten pääsemme käyttämään editPost. Komponenttimme on myös paljon helpompi käyttää uudelleen.

Huomaa, että useDispatchriville #12lisää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!