{"id":233928,"date":"2023-02-26T18:00:00","date_gmt":"2023-02-26T15:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233928"},"modified":"2023-02-26T18:01:13","modified_gmt":"2023-02-26T15:01:13","slug":"gutenberg-vaerskendamine-funktsiooniga-select-ja-dispatch-react-hookidesse-useselect-and-usedispatch","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/gutenberg-vaerskendamine-funktsiooniga-select-ja-dispatch-react-hookidesse-useselect-and-usedispatch\/","title":{"rendered":"Gutenberg: v\u00e4rskendamine funktsiooniga Select ja Dispatch React Hookidesse (useSelect and useDispatch)"},"content":{"rendered":"\n<p>See postitus on kiire sissejuhatus sellesse, kuidas hoida oma Gutenbergi kood Reacti konksude abil vastavuses praeguste standarditega. Vaatame, kuidas see kasulik on, miks me peaksime seda tegema ja kuidas.<\/p>\n<h2>Ah, konksud?<\/h2>\n<p>Eeldan, et teil on juba kogemusi veidi keerukamate Gutenbergi plokkide v\u00f5i pistikprogrammidega, mis otsivad postitusi v\u00f5i toovad ja v\u00e4rskendavad postituste metat. Ja seega t\u00f6\u00f6tanud <code>[withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>ja\/v\u00f5i <code>[withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. Need on WordPressi k\u00f5rgema j\u00e4rgu komponendid, mis v\u00f5imaldavad teil p\u00e4\u00e4seda juurde WordPressi poodidele, et tuua v\u00f5i edastada teavet, mis j\u00e4\u00e4b pisut v\u00e4ljapoole &quot;tavalist&quot; plokki v\u00f5i postituse redigeerimist. V\u00f5imalik, et olete olnud sunnitud kasutama <code>compose<\/code>ka selleks, et \u00fchendada mitme k\u00f5rgema j\u00e4rgu komponendiga komponent. Kui teie kood kasutab neid mustreid, \u00e4rge muretsege \u2013 need t\u00f6\u00f6tavad suurep\u00e4raselt ja t\u00f6\u00f6tavad ka edaspidi! Kuid tehnoloogia arenedes saame paremini hakkama.<\/p>\n<p>2019 aasta alguses t\u00f5i <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">React v\u00e4lja konksud<\/a> (versioon 16.8), mis v\u00f5imaldavad teil olekut kasutada ilma klassi kasutamata ja t\u00e4iustada muid funktsioone, mis annavad loetavama ja korduvkasutatava koodi. N\u00e4iteks registritele juurdep\u00e4\u00e4su saamiseks ei ole vaja koodi m\u00e4hkida k\u00f5rgema j\u00e4rgu komponentidesse. Ja <a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">suvel 2019 j\u00e4rgnes WordPress<\/a>, mis k\u00e4ivitas kohandatud konksud: <code>[useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>ja <code>[useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\n<p>Konksude eelised on palju. K\u00f5ige tavalisem n\u00e4ide on komponendi oleku kasutamise lubamine ilma Javascripti klassi (<code>useState<\/code>) kirjutamata. Kuid minu arvates on suurim kasu korduvkasutatavus. Eemaldades vajaduse kasutada mustreid, nagu renderdusrekvisiidid ja k\u00f5rgema j\u00e4rgu komponendid, saab komponendid kirjutada palju iseseisvamateks t\u00fckkideks. Veel \u00fcks konksude eelis on see, et see muudab teie koodi h\u00f5lpsamini loetavaks ja arusaadavaks!<\/p>\n<p>H\u00fcppame kohe m\u00f5ne n\u00e4ite juurde ja vaatame, kuidas meie koodi rakendada <code>useSelect<\/code>ja konksud seda teha!<code>useDispatch<\/code><\/p>\n<h2>Rakendamine<code>useSelect<\/code><\/h2>\n<p>Alustame <code>withSelect<\/code>ja sellele vastavast konksust <code>useSelect<\/code>. Neid kasutatakse registreeritud valijatelt riigist tuletatud rekvisiitide hankimiseks. Levinud n\u00e4ited on juurdep\u00e4\u00e4s valijatele &quot; <code>core<\/code>&quot; v\u00f5i &quot; <code>core\/editor<\/code>&quot;, et teha postitusi p\u00e4ringuid (<code>getEntityRecords<\/code>), p\u00e4\u00e4seda juurde postituse metale (<code>getEditedPostAttribute<\/code>) v\u00f5i lihtsalt saada praeguse postituse t\u00fc\u00fcp v\u00f5i muu teave.<\/p>\n<p>Esitluse eesm\u00e4rgil alustan lihtsa n\u00e4itega. Oletame, et mul on plokikomponent, kus mul on kuskil postituste valija. Postitusvalikute sisestamiseks pean juurdep\u00e4\u00e4su registrile &quot; <code>core<\/code>&quot; ja <code>GetEntityRecords()<\/code>helistama.<\/p>\n<h3>Vana moodi kasutamine<code>withSelect<\/code><\/h3>\n<p>Kui tahan teha p\u00e4ringuid ploki postituste kohta, pean oma komponendi m\u00e4hkima <code>withSelect<\/code>. Seda tehakse <code>export<\/code>avalduses tavaliselt.<\/p>\n<p>Pange t\u00e4hele, et see koodin\u00e4ide ei ole t\u00e4ielik tegeliku funktsionaalploki v\u00f5i JS-i pistikprogrammina, see on eemaldatud, et kuvada ainult p\u00f5hikontseptsioone <code>withSelect<\/code>. Kui otsite praktilisi koodin\u00e4iteid, on mul ka teisi artikleid, mis seda k\u00e4sitlevad: nt <a href=\"https:\/\/wordpress.mediadoma.com\/et\/looge-kohandatud-gutenbergi-plokk-10-osa-postituste-ja-korgema-jaergu-komponentide-toomine\/\" title=\"kuidas rakendada plokke postituse valikuga\">kuidas rakendada plokke postituse valikuga<\/a> v\u00f5i <a href=\"https:\/\/wordpress.mediadoma.com\/et\/kuidas-lisada-postituse-metavaelju-gutenbergi-dokumendi-kuelgribale\/\" title=\"kuidas lisada inspektorile postituse meta\">kuidas lisada inspektorile postituse meta<\/a>. Need on kirjutatud m\u00e4rkidega <code>withSelect<\/code>ja <code>withDispatch<\/code>, tehke ka need ning tulge siis siia tagasi, et \u00f5ppida, kuidas neid konksudeks muuta.<\/p>\n<pre><code>const { withSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin = ({ somePosts }) =&gt; {\n    console.log(\"Posts from withSelect = \", somePosts);\n    return(\n        &lt;div&gt;\n            ...\n        &lt;\/div&gt;\n    );\n}\n\u00a0\nexport default withSelect( (select) =&gt; {      \n    return {\n        somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n    };\n}) (AWP_Example_Plugin );<\/code><\/pre>\n<p>Nagu reast n\u00e4ete, <code>#12-16<\/code>m\u00e4hkin oma komponendi <code>withSelect<\/code>. Funktsiooni withSelect kaudu p\u00e4\u00e4sen juurde soovitud poodi ja tagastan rekvisiidis &quot; <code>somePosts<\/code>&quot; postitusp\u00e4ringu. See rekvisiit on siis saadaval minu <code>AWP_Example_Plugin<\/code>komponendi sees (nagu n\u00e4ete <code>somePosts<\/code>, et ma h\u00e4vitan rea rekvisiite <code>#3<\/code>).<\/p>\n<p>Nagu varem mainitud, t\u00f6\u00f6tab see meetod suurep\u00e4raselt \u2013 ja t\u00f6\u00f6tab ka edaspidi. Kuid sellel on mitmeid miinuseid. \u00dcks on see, et seda pole v\u00e4ga lihtne m\u00f5ista. Muidugi, see oli v\u00e4ga lihtne n\u00e4ide. Esmapilgul komponendile endale pole kindel, kust tugi <code>somePosts<\/code>p\u00e4rineb v\u00f5i mis see on. Peaksite teadma, et otsida ekspordiaruannet ja vaadata, kas seal on \u00fcmbriseid. See tundub ka veidi lahutamatuna. Teete \u00fcsna suure osa olulisest t\u00f6\u00f6st v\u00e4ljaspool oma komponenti millegi nimel, mida soovite oma komponendi sees saada.<\/p>\n<p>Teeme seda paremini konksude abil.<\/p>\n<h3>Konverteerimine<code>useSelect<\/code><\/h3>\n<p>\u00dcheks teisendamine on <code>withSelect<\/code>nii <code>useSelect<\/code>lihtne kui v\u00f5imalik. Esimene samm on see, et saame defineerida muutuja <code>somePosts<\/code>meie komponendi sees, mitte v\u00e4ljastpoolt <code>export<\/code>avalduse abil. Teine samm on kogu meie funktsiooni <code>withSelect<\/code>teisaldamine <code>useSelect<\/code>. Ja see ongi k\u00f5ik.<\/p>\n<pre><code>const { useSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin =() =&gt; {\n    const { somePosts } = useSelect( (select) =&gt; {        \n        return {\n            somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n        };\n    } );\n    console.log(\"Posts from useSelect = \", somePosts);\n    return(\n        &lt;div&gt;\n            ...\n        &lt;\/div&gt;\n    );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n<p>\u00dclaltoodud kood annab t\u00e4pselt sama tulemuse, mis koodiga <code>withSelect<\/code>. Erinevus seisneb selles, et kood on n\u00fc\u00fcd palju arusaadavam! N\u00fc\u00fcd n\u00e4eme v\u00e4ga lihtsalt, et muutuja <code>somePosts<\/code>salvestab postitusp\u00e4ringu tulemuse otse meie komponendi sisse.<\/p>\n<p><strong>Oluline m\u00e4rkus<\/strong>: <code>useSelect<\/code>aktsepteerib teist parameetrit; hulk s\u00f5ltuvusi. S\u00f5ltuvused on muutujad, mis tagavad, et k\u00e4ivitame ainult <code>useSelect<\/code>siis, kui \u00fcks s\u00f5ltuvustest (muutuja v\u00e4\u00e4rtustest) on muutunud. See osa on olulisem <code>useDispatch<\/code>kui siin, nii et selgitan seda natuke <code>useDispatch<\/code>allpool olevas jaotises.<\/p>\n<h2>Rakendamine<code>useDispatch<\/code><\/h2>\n<p>N\u00fc\u00fcd vaatame <code>withDispatch<\/code>ja sellele vastavat konksu <code>useDispatch<\/code>. Neid kasutatakse rekvisiitide saatmiseks registritesse. N\u00e4iteks k\u00e4skides Gutenbergil v\u00e4rskendada postituse metat &quot; <code>core\/editor<\/code>&quot; kaudu.<\/p>\n<p>J\u00e4llegi, demonstreerimise eesm\u00e4rgil ei ole minu koodin\u00e4ited t\u00e4ielikud funktsionaalsed koodit\u00fckid \u2013 need illustreerivad ainult neid mustreid puudutavaid osi. Selles n\u00e4ites eeldan, et mul on tekstiv\u00e4li, mis n\u00e4itab postituse meta &#8211; ja soovin postituse meta v\u00e4\u00e4rtust muudatuse korral v\u00e4rskendada.<\/p>\n<h3>Vana moodi kasutamine<code>withDispatch<\/code><\/h3>\n<p>Kuna <code>withDispatch<\/code>tegemist on k\u00f5rgema j\u00e4rgu komponendiga, pean oma komponendi selle sisse pakkima. Seda tehakse <code>export<\/code>avalduses tavaliselt. Selleks, et meie meta tekstiv\u00e4li t\u00f6\u00f6taks me<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre><code>const { withDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin = ({ setPostMeta }) =&gt; { \n    return(\n        &lt;PluginDocumentSettingPanel title={ __( 'withDispatch Example', 'txtdomain') }&gt;\n            &lt;PanelRow&gt;\n                &lt;TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value=\"\"\n                    onChange={ (value) =&gt; setPostMeta( { example_post_meta: value }) }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n        &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}\n\u00a0\nexport default withDispatch( (dispatch) =&gt; {\n    return {\n        setPostMeta( newMeta) {\n            dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n        }\n    };\n} )( AWP_Example_Plugin );<\/code><\/pre>\n<p>Real <code>#20-26<\/code>m\u00e4hime komponendi sisse <code>withDispatch<\/code>, milles tagastame funktsiooni &quot; <code>setPostMeta<\/code>&quot;, mis saadab posti meta (selle v\u00e4rskendamiseks). Real <code>#6<\/code>destruktureerime rekvisiidi, et saaksime seda kasutada tekstiv\u00e4lja <code>onChange<\/code>s\u00fcndmuses real <code>#13<\/code>. (Pange t\u00e4hele, et \u00fclaltoodud n\u00e4ide ei oleks funktsionaalne, kuna m\u00e4\u00e4rasime tekstiv\u00e4lja v\u00e4\u00e4rtuseks t\u00fchja stringi. See on lihtsalt selleks, et n\u00e4idata, kuidas me kasutaksime l\u00e4hetamist).<\/p>\n<p>J\u00e4llegi n\u00e4eme, et koodi m\u00f5istmine pole nii lihtne. Peaksite teadma, et otsida \u00fcmbrist, et aru saada, mis rekvisiit &#8221; <code>setPostMeta<\/code>&quot; on v\u00f5i millest see p\u00e4rineb. Teeme seda paremini konksude abil!<\/p>\n<h3>Konverteerimine<code>useDispatch<\/code><\/h3>\n<p>Keeleks muutmine <code>withDispatch<\/code>ei <code>useDispatch<\/code>ole nii lihtne <code>withSelect<\/code>kui <code>useSelect<\/code>. See on siiski \u00fcsna lihtne. Tasub meeles pidada kahte asja. \u00dcks on see, et <code>useDispatch<\/code>esimese parameetrina v\u00f5etakse poe nimi. Seej\u00e4rel p\u00e4\u00e4seksime poodi juurde ja kutsuksime v\u00e4lja selle saadaolevad funktsioonid, kui seda kasutame (nt tekstiv\u00e4lja <code>onChange<\/code>s\u00fcndmusel). Teiseks on teise parameetri s\u00f5ltuvuste massiiv <code>useDispatch<\/code>olulisem kui parameetriga <code>useSelect<\/code>. Kui te ei halda s\u00f5ltuvusi \u00f5igesti, v\u00f5ite riskida, et teie kood satub igavesse ts\u00fcklisse. Ainult s\u00f5ltuvusmuutujate muutmisel k\u00e4ivitatakse skript uuesti <code>useDispatch<\/code>.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre><code>const { useDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin =() =&gt; {  \n    const tmpMetaValue = \"\";\n    const { editPost } = useDispatch( 'core\/editor', [ tmpMetaValue ] );\n\u00a0\n    return(\n        &lt;PluginDocumentSettingPanel title={ __( 'useDispatch Example', 'txtdomain') }&gt;\n            &lt;PanelRow&gt;\n                &lt;TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value={ tmpMetaValue }\n                    onChange={ (value) =&gt; editPost( { meta: { example_post_meta: value } }) }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n        &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n<p>Liinil <code>#8<\/code>h\u00e4vitame selle, mida vajame poest &quot; <code>core\/editor<\/code>&quot;. Meid huvitab ainult <code>editPost<\/code>funktsioon, mida saame kasutada postituse meta v\u00e4rskendamiseks. Teise parameetrina <code>useDispatch<\/code>pakume s\u00f5ltuvusi. Postituse meta v\u00e4rskendamise n\u00e4ite puhul oleks postituse meta v\u00e4\u00e4rtuse kasutamine (kasutades <code>useSelect<\/code>) t\u00e4iuslik s\u00f5ltuvusena. Selles n\u00e4ites olen selle lihtsalt m\u00e4\u00e4ranud n\u00e4iliseks muutujaks. Vaadake p\u00f5hjalikumat ja realistlikumat n\u00e4idet allpool. Ja siis <code>#16<\/code>tekstiv\u00e4lja <code>onChange<\/code>s\u00fcndmuse real helistame <code>editPost<\/code>meta v\u00e4rskendamiseks. Pange t\u00e4hele selle rea erinevust <code>withDispatch<\/code>\u00fclaltoodud kasutamisega! Kuna me kasutame <code>editPost<\/code>posti meta v\u00e4rskendamiseks (<code>setPostMeta<\/code>) funktsiooni tagastamise asemel otse, peame esitama objekti koos<code>meta<\/code>v\u00f5tmena ja seej\u00e4rel objekti postituse metaga, mida soovime v\u00e4rskendada. Oleme <code>withDispatch<\/code>koodi jaganud osadeks.<\/p>\n<p>Siiski <code>useDispatch<\/code>muudab kasutamine koodi palju loetavamaks ja arusaadavamaks. V\u00e4ljapoole meie komponenti ei lisata enam koodi, mida peame sees kasutama.<\/p>\n<h2>T\u00e4ielikum n\u00e4ide ja vajaduse kaotamine<code>compose<\/code><\/h2>\n<p>Kui kasutate <code>withDispatch<\/code>, on t\u00f5en\u00e4oline, et vajate <code>withSelect<\/code>ka seda komponenti. \u00dclaltoodud n\u00e4idetes <code>useDispatch<\/code>v\u00e4rskendame postituse metav\u00e4\u00e4rtust. Kuid selleks, et tekstiv\u00e4li t\u00f6\u00f6taks korralikult (ja n\u00e4itaks ka praegust v\u00e4\u00e4rtust), peaksime tooma ka postituse metav\u00e4\u00e4rtuse.<\/p>\n<p>Kui teil on vaja kasutada mitut komponendi \u00fcmber m\u00e4hitud k\u00f5rgemat j\u00e4rku komponenti, kasutaksite t\u00f5en\u00e4oliselt veel \u00fcht Gutenbergi funktsiooni; <code>[compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. See on mugav funktsioon mitme k\u00f5rgema j\u00e4rgu komponendi kombineerimiseks \u00fcheks k\u00f5rgema j\u00e4rgu komponendiks, mille \u00fcmber saate oma komponendi \u00fcmber m\u00e4hkida.<\/p>\n<p>Vaatame t\u00e4ielikumat n\u00e4idet komponendist, mis hangib tekstiv\u00e4ljal postituse metav\u00e4\u00e4rtuse ja v\u00e4rskendab selle v\u00e4\u00e4rtuse muutmisel. Alustame sellest, kuidas me peaksime seda tegema, kasutades <code>withSelect<\/code>ja <code>withDispatch<\/code>(ja seega ka <code>compose<\/code>).<\/p>\n<h3>Kasutades <code>withSelect<\/code>, <code>withDispatch<\/code>ja<code>compose<\/code><\/h3>\n<pre><code>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 }) =&gt; {\n    return(\n        &lt;PluginDocumentSettingPanel title={ __( 'withSelect and withDispatch Example', 'txtdomain') }&gt;\n            &lt;PanelRow&gt;\n                &lt;TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value={ postMeta.example_post_meta }\n                    onChange={ (value) =&gt; setPostMeta( { example_post_meta: value }) }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n        &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}\n\u00a0\nexport default compose( [\n    withSelect( (select) =&gt; {     \n        return {\n            postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        };\n    } ),\n    withDispatch( (dispatch) =&gt; {\n        return {\n            setPostMeta( newMeta) {\n                dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n            }\n        };\n    }) ] )( AWP_Example_Plugin );<\/code><\/pre>\n<p>Joones <code>#21-34<\/code>koostame <code>withSelect<\/code>ja <code>withDispatch<\/code>m\u00e4hime need \u00fcmber oma komponendi. <code>postMeta<\/code>alates <code>withSelect<\/code>ja <code>setPostMeta<\/code>alates <code>withDispatch<\/code>on n\u00fc\u00fcd saadaval meie komponendis rekvisiidina. Destruktureerime need real <code>#7<\/code>ja kasutame neid <code>#13<\/code>ja <code>#14<\/code>.<\/p>\n<p>Nagu n\u00e4ete, on v\u00e4ljaspool meie komponenti vajalik kood pikem kui komponent ise. Ma ei tea, kuidas teiega on, aga minu jaoks tundub see veidi segane. Arendajad v\u00f5ivad hakata seda koodi lugema \u00fclevalt, mitte n\u00e4gema alumist osa, ja hakata m\u00f5tlema, kust <code>postMeta<\/code>ja kust <code>setPostMeta<\/code>see p\u00e4rit on \u2013 need n\u00e4ivad olevat v\u00f5luv\u00e4el k\u00e4ttesaadavad. Minu jaoks on see v\u00e4ga ebaintuitiivne.<\/p>\n<p>Vaatame, kuidas me \u00fclaltoodud n\u00e4ite konksudeks teisendaksime.<\/p>\n<h3>Kasutades <code>useSelect<\/code>ja<code>useDispatch<\/code><\/h3>\n<pre><code>const { __ } = wp.i18n;\nconst { useSelect, useDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = () =&gt; {\n    const { postMeta } = useSelect( (select) =&gt; {     \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        &lt;PluginDocumentSettingPanel title={ __( 'useSelect and useDispatch Example', 'txtdomain') }&gt;\n            &lt;PanelRow&gt;\n                &lt;TextControl\n                    label={ __( 'Example post meta', 'txtdomain') }\n                    value={ postMeta.example_post_meta }\n                    onChange={ (value) =&gt; editPost( { meta: { example_post_meta: value } }) }\n                \/&gt;\n            &lt;\/PanelRow&gt;\n        &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n<p>Kui ilus ja loetav see on?! N\u00e4eme oma komponendis otsekohe, kust <code>postMeta<\/code>hangitakse ja kuidas me sellele juurdep\u00e4\u00e4su saame <code>editPost<\/code>. Meie komponenti on ka palju lihtsam taaskasutada.<\/p>\n<p>Pange t\u00e4hele, et <code>useDispatch<\/code>reale <code>#12<\/code>lisame s\u00f5ltuvusena v\u00e4rskendatava postmeta (<code>postMeta.example_post_meta<\/code>). Kui peaksite hoidma selles komponendis mitut postituse metamuutujat ajakohasena, peaksite need k\u00f5ik lisama s\u00f5ltuvusena, et tagada l\u00e4hetamise k\u00e4itamine (tegelikult salvestades postituse meta), kui \u00fche neist v\u00e4\u00e4rtus muutub.<\/p>\n<p>Loodan, et see oli kellelegi informatiivne ja kasulik. Konksud on mulle veel veidi v\u00f5\u00f5rad, kuid n\u00e4hes nende kasutamise eeliseid, ei p\u00f6\u00f6rdu ma tagasi!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sissejuhatus Reacti konksude kasutamisesse useSelect ja useDispatch. Vaatame, kuidas see kasulik on, miks peaksime seda tegema ja kuidas t\u00e4pselt.<\/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":[937,937,1110,842,812,812,842,863,863],"tags":[1165],"class_list":["post-233928","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-4","category-n-a","category-opetused","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233928"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233928\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/151604"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}