{"id":233984,"date":"2023-02-26T18:46:00","date_gmt":"2023-02-26T15:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233984"},"modified":"2023-02-26T18:47:22","modified_gmt":"2023-02-26T15:47:22","slug":"gutenberg-paeivitys-select-ja-withdispatchilla-react-hooksiin-useselect-and-usedispatch","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/gutenberg-paeivitys-select-ja-withdispatchilla-react-hooksiin-useselect-and-usedispatch\/","title":{"rendered":"Gutenberg: P\u00e4ivitys Select- ja withDispatchilla React Hooksiin (useSelect and useDispatch)"},"content":{"rendered":"\n

T\u00e4m\u00e4 viesti on nopea johdatus tapaan pit\u00e4\u00e4 Gutenberg-koodisi nykyisten standardien tasolla React-koukkujen avulla. Katsotaan, kuinka t\u00e4st\u00e4 on hy\u00f6ty\u00e4, miksi meid\u00e4n pit\u00e4isi tehd\u00e4 se ja miten.<\/p>\n

Huh, koukut?<\/h2>\n

Oletan, ett\u00e4 sinulla on jo kokemusta ty\u00f6skentelyst\u00e4 hieman monimutkaisempien Gutenberg-lohkojen tai -laajennusten kanssa, jotka kyselev\u00e4t viestej\u00e4 tai hakevat ja p\u00e4ivitt\u00e4v\u00e4t postin metaa. Ja n\u00e4in ollen ty\u00f6skennellyt [withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>ja\/tai [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. N\u00e4m\u00e4 ovat korkeamman asteen komponentteja WordPressiss\u00e4, joiden avulla voit k\u00e4ytt\u00e4\u00e4 WordPressin kauppoja hakeaksesi tai ty\u00f6nt\u00e4\u00e4ksesi tietoja, jotka ovat hieman "normaalin" lohkon tai j\u00e4lkeisen muokkauksen ulkopuolella. Olet ehk\u00e4 joutunut k\u00e4ytt\u00e4m\u00e4\u00e4n compose<\/code>sit\u00e4 my\u00f6s yhdist\u00e4\u00e4ksesi komponentti, jossa on useita korkeamman asteen komponentteja. Jos koodisi k\u00e4ytt\u00e4\u00e4 n\u00e4it\u00e4 malleja, \u00e4l\u00e4 huoli \u2013 ne toimivat t\u00e4ydellisesti ja toimivat edelleen! Mutta tekniikan kehittyess\u00e4 voimme tehd\u00e4 paremmin.<\/p>\n

Alkuvuodesta 2019 React julkaisi koukut<\/a> (versio 16.8) \u2013 joiden avulla voit k\u00e4ytt\u00e4\u00e4 tilaa ilman luokkaa ja parantaa muita ominaisuuksia, jotka tekev\u00e4t koodista luettavamman ja uudelleenk\u00e4ytett\u00e4v\u00e4n. Esimerkiksi poistamalla tarve k\u00e4\u00e4ri\u00e4 koodi korkeamman asteen osiin p\u00e4\u00e4st\u00e4ksesi rekistereihin. Ja kes\u00e4ll\u00e4 2019 seurasi WordPress<\/a> lanseeraten mukautettuja koukkuja: [useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>ja [useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\n

Koukuilla on monia etuja. Yleisin esimerkki on komponenttitilan k\u00e4yt\u00f6n salliminen ilman Javascript-luokan (useState<\/code>) kirjoittamista. Mutta mielest\u00e4ni suurin hy\u00f6ty on uudelleenk\u00e4ytett\u00e4vyys. Poistamalla tarve k\u00e4ytt\u00e4\u00e4 kuvioita, kuten render\u00f6intirekvisiittaa ja korkeamman asteen komponentteja, komponentit voidaan kirjoittaa paljon itsen\u00e4isemmiksi osiksi. Toinen koukkujen etu on, ett\u00e4 se tekee koodistasi helpompi lukea ja ymm\u00e4rt\u00e4\u00e4!<\/p>\n

Siirryt\u00e4\u00e4np\u00e4 suoraan esimerkkeihin ja katsotaan, kuinka koodimme toteutetaan useSelect<\/code>ja useDispatch<\/code>kiinnitet\u00e4\u00e4n!<\/p>\n

ToteutususeSelect<\/code><\/h2>\n

Aloitetaan withSelect<\/code>ja sit\u00e4 vastaava koukku useSelect<\/code>. N\u00e4it\u00e4 k\u00e4ytet\u00e4\u00e4n hankkimaan tilasta per\u00e4isin olevia rekvisiitta rekister\u00f6idyilt\u00e4 valitsijoilta. Yleisi\u00e4 esimerkkej\u00e4 ovat valitsimien ’ core<\/code>’ tai ’ core\/editor<\/code>’ k\u00e4ytt\u00e4minen kyselyjen tekemiseksi viesteille (getEntityRecords<\/code>), viestin metasis\u00e4ll\u00f6n k\u00e4ytt\u00e4minen (getEditedPostAttribute<\/code>) tai yksinkertaisesti nykyisen viestityypin tai muiden tietojen hankkiminen.<\/p>\n

Esittelytarkoituksessa aloitan yksinkertaisella esimerkill\u00e4. Oletetaan, ett\u00e4 minulla on lohkokomponentti, jossa minulla on jossain viestien valitsin. Viestivaihtoehtojen t\u00e4ytt\u00e4miseksi minun on k\u00e4ytett\u00e4v\u00e4 rekisteri\u00e4 core<\/code>ja suoritettava GetEntityRecords()<\/code>puhelu.<\/p>\n

Vanha tapa k\u00e4ytt\u00e4\u00e4withSelect<\/code><\/h3>\n

Jos haluan kysell\u00e4 lohkon viesteist\u00e4, minun on k\u00e4\u00e4ritt\u00e4v\u00e4 komponentti withSelect<\/code>. T\u00e4m\u00e4 tehd\u00e4\u00e4n yleens\u00e4 export<\/code>lausunnossa.<\/p>\n

Huomaa, ett\u00e4 t\u00e4m\u00e4 koodiesimerkki ei ole t\u00e4ydellinen varsinaisena toiminnallisena lohkona tai JS-laajennuksena, vaan se on poistettu, jotta se n\u00e4ytt\u00e4\u00e4 vain sovelluksen ydink\u00e4sitteet withSelect<\/code>. Jos etsit k\u00e4yt\u00e4nn\u00f6n koodiesimerkkej\u00e4, minulla on muita artikkeleita, jotka kattavat t\u00e4m\u00e4n: esim . kuinka toteuttaa lohkoja post select -toiminnolla<\/a> tai kuinka lis\u00e4t\u00e4 post-meta tarkastajaan<\/a>. Ne on kirjoitettu merkinn\u00f6ill\u00e4 withSelect<\/code>ja withDispatch<\/code>, niin tee nekin, ja palaa sitten t\u00e4nne oppimaan, kuinka ne muunnetaan koukkuiksi.<\/p>\n

const { withSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin = ({ somePosts }) => {\n    console.log(\"Posts from withSelect = \", somePosts);\n    return(\n        <div>\n            ...\n        <\/div>\n    );\n}\n\u00a0\nexport default withSelect( (select) => {      \n    return {\n        somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n    };\n}) (AWP_Example_Plugin );<\/code><\/pre>\n
Kuten rivist\u00e4 n\u00e4kyy, #12-16<\/code>k\u00e4\u00e4nn\u00e4n komponenttini withSelect<\/code>. WithSelect-toiminnon sis\u00e4ll\u00e4 p\u00e4\u00e4sen haluamaani kauppaan ja palautan viestikyselyn " somePosts<\/code>". T\u00e4m\u00e4 rekvisiitta on sitten saatavilla AWP_Example_Plugin<\/code>komponentissani (kuten n\u00e4ette, ett\u00e4 destructure somePosts<\/code>from rekvisiitta linjalla #3<\/code>).<\/p>\n
Kuten aiemmin mainittiin, t\u00e4m\u00e4 menetelm\u00e4 toimii hienosti \u2013 ja toimii jatkossakin. Mutta t\u00e4ss\u00e4 on useita huonoja puolia. Yksi on, ett\u00e4 t\u00e4t\u00e4 ei ole kovin helppo ymm\u00e4rt\u00e4\u00e4. Toki t\u00e4m\u00e4 oli hyvin yksinkertainen esimerkki. Ensi silm\u00e4yksell\u00e4 itse komponentista et ole varma, mist\u00e4 potkuri somePosts<\/code>tulee tai mik\u00e4 se on. Sinun pit\u00e4isi osata etsi\u00e4 vientilausuntoa ja katsoa, \u200b\u200bonko siin\u00e4 k\u00e4\u00e4reit\u00e4. Se tuntuu my\u00f6s hieman hajaantuneelta. Teet melkoisen osan t\u00e4rke\u00e4st\u00e4 ty\u00f6st\u00e4 komponentin ulkopuolella, johonkin, jonka haluat todella saatavan komponentin sis\u00e4ll\u00e4.<\/p>\n
Tehd\u00e4\u00e4n se paremmin koukkujen avulla.<\/p>\n
Muunnetaan muotoonuseSelect<\/code><\/h3>\n
Muuntaminen withSelect<\/code>osaksi useSelect<\/code>on niin yksinkertaista kuin se voi olla. Ensimm\u00e4inen askel on, ett\u00e4 voimme m\u00e4\u00e4ritt\u00e4\u00e4 muuttujan somePosts<\/code>komponenttimme sis\u00e4ll\u00e4 sen sijaan, ett\u00e4 se olisi export<\/code>lauseen ulkopuolella. Toinen vaihe on siirt\u00e4\u00e4 koko toiminto, joka meill\u00e4 withSelect<\/code>oli useSelect<\/code>. Ja siin\u00e4 se.<\/p>\n
const { useSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin =() => {\n    const { somePosts } = useSelect( (select) => {        \n        return {\n            somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n        };\n    } );\n    console.log(\"Posts from useSelect = \", somePosts);\n    return(\n        <div>\n            ...\n        <\/div>\n    );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n
Yll\u00e4 oleva koodi tarjoaa t\u00e4sm\u00e4lleen saman tuloksen kuin koodi, jossa on withSelect<\/code>. Erona on, ett\u00e4 koodi on nyt paljon ymm\u00e4rrett\u00e4v\u00e4mpi! Voimme nyt hyvin helposti n\u00e4hd\u00e4, ett\u00e4 muuttuja somePosts<\/code>tallentaa viestikyselyn tuloksen suoraan komponenttiimme.<\/p>\n
T\u00e4rke\u00e4 huomautus<\/strong>: useSelect<\/code>hyv\u00e4ksyy toisen parametrin; joukko riippuvuuksia. Riippuvuudet ovat muuttujia, jotka varmistavat, ett\u00e4 suoritamme vain, useSelect<\/code>kun jokin riippuvuuksista (muuttujien arvoista) on muuttunut. T\u00e4m\u00e4 osa on t\u00e4rke\u00e4mpi useDispatch<\/code>kuin t\u00e4\u00e4ll\u00e4, joten selit\u00e4n t\u00e4t\u00e4 hieman tarkemmin alla olevassa useDispatch<\/code>osiossa.<\/p>\n
ToteutususeDispatch<\/code><\/h2>\n
Katsotaanpa nyt withDispatch<\/code>ja sit\u00e4 vastaavaa koukkua useDispatch<\/code>. Niit\u00e4 k\u00e4ytet\u00e4\u00e4n rekvisiitin l\u00e4hett\u00e4miseen rekistereihin. Esimerkiksi k\u00e4skem\u00e4ll\u00e4 Gutenbergi\u00e4 p\u00e4ivitt\u00e4m\u00e4\u00e4n viestimeta " core\/editor<\/code>" kautta.<\/p>\n
J\u00e4lleen esittelytarkoituksessa koodiesimerkit eiv\u00e4t ole t\u00e4ydellisi\u00e4 toiminnallisia koodinp\u00e4tki\u00e4 \u2013 ne kuvaavat vain n\u00e4it\u00e4 malleja koskevia osia. T\u00e4ss\u00e4 esimerkiss\u00e4 oletetaan, ett\u00e4 minulla on tekstikentt\u00e4, joka n\u00e4ytt\u00e4\u00e4 post-meta – ja haluan p\u00e4ivitt\u00e4\u00e4 post meta -arvon muutoksen yhteydess\u00e4.<\/p>\n
Vanha tapa k\u00e4ytt\u00e4\u00e4withDispatch<\/code><\/h3>\n
Kuten withDispatch<\/code>korkeamman asteen komponentti, minun on k\u00e4\u00e4ritt\u00e4v\u00e4 komponentti t\u00e4m\u00e4n sis\u00e4\u00e4n. T\u00e4m\u00e4 tehd\u00e4\u00e4n yleens\u00e4 export<\/code>lausunnossa. Saadaksemme tekstikent\u00e4n metallemme toimimaan me<\/p>\n
Esimerkiksi:<\/p>\n
const { withDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin = ({ setPostMeta }) => { \n    return(\n        <PluginDocumentSettingPanel title={ __( 'withDispatch Example', 'txtdomain') }>\n            <PanelRow>\n                <TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value=\"\"\n                    onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n                \/>\n            <\/PanelRow>\n        <\/PluginDocumentSettingPanel>\n    );\n}\n\u00a0\nexport default withDispatch( (dispatch) => {\n    return {\n        setPostMeta( newMeta) {\n            dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n        }\n    };\n} )( AWP_Example_Plugin );<\/code><\/pre>\n
Rivill\u00e4 #20-26<\/code>k\u00e4\u00e4rimme komponentin sis\u00e4lle withDispatch<\/code>, jossa palautetaan funktio " setPostMeta<\/code>", joka l\u00e4hett\u00e4\u00e4 post metan (p\u00e4ivitt\u00e4\u00e4ksesi sen). Rivill\u00e4 #6<\/code>puretaan prop, jotta voimme k\u00e4ytt\u00e4\u00e4 sit\u00e4 tekstikent\u00e4n onChange<\/code>tapahtumassa rivill\u00e4 #13<\/code>. (Huomaa, ett\u00e4 yll\u00e4 oleva esimerkki ei toimi, koska asetamme tekstikent\u00e4n arvon tyhj\u00e4ksi merkkijonoksi. T\u00e4m\u00e4 on vain havainnollistaaksesi, kuinka k\u00e4ytt\u00e4isimme l\u00e4hetyst\u00e4).<\/p>\n
J\u00e4lleen voimme n\u00e4hd\u00e4, ett\u00e4 koodi ei ole niin yksinkertaista ymm\u00e4rt\u00e4\u00e4. Sinun pit\u00e4isi osata etsi\u00e4 k\u00e4\u00e4rett\u00e4 selvitt\u00e4\u00e4ksesi, mik\u00e4 rekvisiitta " setPostMeta<\/code>" on tai mist\u00e4 se tulee. Tehd\u00e4\u00e4n se paremmin koukkujen avulla!<\/p>\n
Muunnetaan muotoonuseDispatch<\/code><\/h3>\n
Muuttaminen muotoon ei ole aivan yht\u00e4 yksinkertaista kuin withDispatch<\/code>muuntaminen muotoon. Se on silti melko helppoa. On kaksi asiaa, jotka on pidett\u00e4v\u00e4 mieless\u00e4. Yksi on se, ett\u00e4 ensimm\u00e4isen\u00e4 parametrina k\u00e4ytet\u00e4\u00e4n kaupan nime\u00e4. T\u00e4m\u00e4n j\u00e4lkeen p\u00e4\u00e4sisimme kauppaan ja kutsuisimme sen k\u00e4ytett\u00e4viss\u00e4 olevia toimintoja, kun k\u00e4yt\u00e4mme sit\u00e4 (esim. tekstikent\u00e4n tapahtumassa). Toiseksi riippuvuuksien joukko toiseen parametriin on t\u00e4rke\u00e4mpi kuin. Voit vaarantaa koodisi p\u00e4\u00e4tyv\u00e4n ikuiseen silmukkaan, jos et hallitse riippuvuuksia oikein. Vain kun riippuvuusmuuttujia muutetaan, komentosarja suoritetaan uudelleen .useDispatch``withSelect``useSelect``useDispatch``onChange``useDispatch``useSelect``useDispatch<\/code><\/p>\n
Esimerkiksi:<\/p>\n
const { useDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin =() => {  \n    const tmpMetaValue = \"\";\n    const { editPost } = useDispatch( 'core\/editor', [ tmpMetaValue ] );\n\u00a0\n    return(\n        <PluginDocumentSettingPanel title={ __( 'useDispatch Example', 'txtdomain') }>\n            <PanelRow>\n                <TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value={ tmpMetaValue }\n                    onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n                \/>\n            <\/PanelRow>\n        <\/PluginDocumentSettingPanel>\n    );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n
Linjalla #8<\/code>tuhoamme sen, mit\u00e4 tarvitsemme kaupasta ’ core\/editor<\/code>’. Meit\u00e4 kiinnostaa vain editPost<\/code>toiminto, jolla voimme p\u00e4ivitt\u00e4\u00e4 post metan. Toisena parametrina useDispatch<\/code>tarjoamme riippuvuudet. Mit\u00e4 tulee esimerkkiin post metan p\u00e4ivitt\u00e4misest\u00e4, post-meta-arvon k\u00e4ytt\u00e4minen (k\u00e4ytt\u00e4m\u00e4ll\u00e4 useSelect<\/code>) olisi t\u00e4ydellinen riippuvuutena. T\u00e4ss\u00e4 esimerkiss\u00e4 olen vain asettanut sen valemuuttujaksi. Katso alempana kattavampi ja realistisempi esimerkki. Ja sitten #16<\/code>tekstikent\u00e4n onChange<\/code>tapahtuman rivill\u00e4 soitamme editPost<\/code>p\u00e4ivitt\u00e4\u00e4ksemme metan. Huomaa ero t\u00e4ss\u00e4 riviss\u00e4 withDispatch<\/code>yll\u00e4 olevan k\u00e4yt\u00f6n kanssa! Koska k\u00e4yt\u00e4mme editPost<\/code>suoraan funktion palauttamisen sijaan p\u00e4ivitt\u00e4\u00e4ksemme post-meta meille (setPostMeta<\/code>), meid\u00e4n on annettava objektimeta<\/code>avaimena ja sitten objekti, jonka post-meta haluamme p\u00e4ivitt\u00e4\u00e4. Olemme tavallaan jakaneet withDispatch<\/code>koodin osiin.<\/p>\n
Silti k\u00e4ytt\u00f6 useDispatch<\/code>tekee koodista paljon luettavamman ja ymm\u00e4rrett\u00e4v\u00e4mm\u00e4n. Komponenttimme ulkopuolelle ei en\u00e4\u00e4 lis\u00e4t\u00e4 koodia, jota meid\u00e4n tarvitsee k\u00e4ytt\u00e4\u00e4 sis\u00e4ll\u00e4.<\/p>\n
T\u00e4ydellisempi esimerkki ja poistava tarvecompose<\/code><\/h2>\n
On mahdollista, ett\u00e4 jos k\u00e4yt\u00e4t withDispatch<\/code>, tarvitset withSelect<\/code>my\u00f6s kyseisess\u00e4 komponentissa. Yll\u00e4 olevissa esimerkeiss\u00e4 useDispatch<\/code>p\u00e4ivit\u00e4mme post-meta-arvon. Mutta jotta tekstikentt\u00e4 toimisi oikein (ja n\u00e4ytt\u00e4\u00e4 my\u00f6s nykyisen arvon), meid\u00e4n on my\u00f6s noudettava post-meta-arvo.<\/p>\n
Jos sinun on k\u00e4ytett\u00e4v\u00e4 useita korkeamman asteen komponentteja komponentin ymp\u00e4rille, k\u00e4ytt\u00e4isit todenn\u00e4k\u00f6isesti viel\u00e4 toista Gutenberg-toimintoa; [compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. Se on k\u00e4tev\u00e4 toiminto yhdist\u00e4\u00e4 useita korkeamman asteen komponentteja yhdeksi korkeamman asteen komponentiksi, jonka ymp\u00e4rille voit k\u00e4\u00e4ri\u00e4 komponentin.<\/p>\n
Katsotaanpa t\u00e4ydellisemp\u00e4\u00e4 esimerkki\u00e4 komponentista, joka hakee post-meta-arvon tekstikentt\u00e4\u00e4n ja p\u00e4ivitt\u00e4\u00e4, kun sen arvoa muutetaan. Aloitamme siit\u00e4, kuinka meid\u00e4n pit\u00e4isi tehd\u00e4 se k\u00e4ytt\u00e4m\u00e4ll\u00e4 withSelect<\/code>ja withDispatch<\/code>(ja siten my\u00f6s compose<\/code>).<\/p>\n
K\u00e4ytt\u00e4m\u00e4ll\u00e4 withSelect<\/code>, withDispatch<\/code>jacompose<\/code><\/h3>\n
const { __ } = wp.i18n;\nconst { compose } = wp.compose;\nconst { withSelect, withDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = ({ postMeta, setPostMeta }) => {\n    return(\n        <PluginDocumentSettingPanel title={ __( 'withSelect and withDispatch Example', 'txtdomain') }>\n            <PanelRow>\n                <TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value={ postMeta.example_post_meta }\n                    onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n                \/>\n            <\/PanelRow>\n        <\/PluginDocumentSettingPanel>\n    );\n}\n\u00a0\nexport default compose( [\n    withSelect( (select) => {     \n        return {\n            postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        };\n    } ),\n    withDispatch( (dispatch) => {\n        return {\n            setPostMeta( newMeta) {\n                dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n            }\n        };\n    }) ] )( AWP_Example_Plugin );<\/code><\/pre>\n
Linjalla #21-34<\/code>laadimme withSelect<\/code>ja withDispatch<\/code>k\u00e4\u00e4rimme ne komponenttimme ymp\u00e4rille. postMeta<\/code>alkaen withSelect<\/code>ja setPostMeta<\/code>alkaen withDispatch<\/code>ovat nyt saatavilla komponentissamme rekvisiittana. Puramme ne linjalla #7<\/code>ja k\u00e4yt\u00e4mme niit\u00e4 #13<\/code>ja #14<\/code>.<\/p>\n
Kuten n\u00e4ette, komponenttimme ulkopuolella tarvittava koodi on pidempi kuin itse komponentti. En tied\u00e4 teist\u00e4, mutta minusta se tuntuu hieman hajaantuneelta. Kehitt\u00e4j\u00e4t voivat alkaa lukea t\u00e4t\u00e4 koodia ylh\u00e4\u00e4lt\u00e4 n\u00e4kem\u00e4tt\u00e4 alaosaa ja alkaa ihmetell\u00e4, mist\u00e4 postMeta<\/code>ja setPostMeta<\/code>mist\u00e4 ne tulevat \u2013 ne n\u00e4ytt\u00e4v\u00e4t olevan taianomaisesti saatavilla. Minulle t\u00e4m\u00e4 on hyvin ep\u00e4intuitiivista.<\/p>\n
Katsotaanpa, kuinka muuttaisimme yll\u00e4 olevan esimerkin koukkuiksi.<\/p>\n
K\u00e4ytt\u00e4m\u00e4ll\u00e4 useSelect<\/code>jauseDispatch<\/code><\/h3>\n
const { __ } = wp.i18n;\nconst { useSelect, useDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = () => {\n    const { postMeta } = useSelect( (select) => {     \n        return {\n            postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        };\n    } );\n    const { editPost } = useDispatch( 'core\/editor', [ postMeta.example_post_meta ] );\n\u00a0\n    return(\n        <PluginDocumentSettingPanel title={ __( 'useSelect and useDispatch Example', 'txtdomain') }>\n            <PanelRow>\n                <TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value={ postMeta.example_post_meta }\n                    onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n                \/>\n            <\/PanelRow>\n        <\/PluginDocumentSettingPanel>\n    );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n
Kuinka kaunista ja luettavaa se on?! N\u00e4emme komponentistamme heti, mist\u00e4 postMeta<\/code>se haetaan ja miten p\u00e4\u00e4semme k\u00e4ytt\u00e4m\u00e4\u00e4n editPost<\/code>. Komponenttimme on my\u00f6s paljon helpompi k\u00e4ytt\u00e4\u00e4 uudelleen.<\/p>\n
Huomaa, ett\u00e4 useDispatch<\/code>riville #12<\/code>lis\u00e4\u00e4mme p\u00e4ivitett\u00e4v\u00e4n postmeta-tiedoston riippuvuudeksi (postMeta.example_post_meta<\/code>). Jos haluat pit\u00e4\u00e4 useita post-metamuuttujia ajan tasalla t\u00e4ss\u00e4 komponentissa, sinun on lis\u00e4tt\u00e4v\u00e4 jokainen riippuvuutena varmistaaksesi, ett\u00e4 l\u00e4hetys suoritetaan (todellisuudessa tallentaa post-meta), kun yhden niist\u00e4 arvo muuttuu.<\/p>\n
Toivottavasti t\u00e4m\u00e4 on ollut informatiivinen ja hy\u00f6dyllinen jollekin siell\u00e4 olevalle. Koukut ovat minulle viel\u00e4 v\u00e4h\u00e4n tuntemattomia, mutta n\u00e4hdess\u00e4ni niiden k\u00e4yt\u00f6n edut en k\u00e4\u00e4nny takaisin!<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Johdatus React-koukkujen k\u00e4ytt\u00f6\u00f6n useSelect and useDispatch. Katsotaan, kuinka t\u00e4st\u00e4 on hy\u00f6ty\u00e4, miksi meid\u00e4n pit\u00e4isi tehd\u00e4 se ja miten tarkalleen.<\/p>\n","protected":false},"author":1,"featured_media":151604,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,938,813,1110,843,813,843,864,864],"tags":[1166],"class_list":["post-233984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-laajennuksia","category-n-a","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233984"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233984\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151604"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}