Ten post jest szybkim wprowadzeniem do sposobu, aby Tw\u00f3j kod Gutenberga by\u0142 zgodny z aktualnymi standardami za pomoc\u0105 hak\u00f3w React. Zobaczymy, jak to jest korzystne, dlaczego powinni\u015bmy to robi\u0107 i jak.<\/p>\n
Zak\u0142adam, \u017ce masz ju\u017c pewne do\u015bwiadczenie w pracy z nieco bardziej z\u0142o\u017conymi blokami lub wtyczkami Gutenberga, kt\u00f3re wysy\u0142aj\u0105 zapytania do post\u00f3w lub pobieraj\u0105 i aktualizuj\u0105 meta post\u00f3w. I w ten spos\u00f3b pracowa\u0142em z Na pocz\u0105tku 2019 r. React wypu\u015bci\u0142 hooki<\/a> (wersja 16.8) \u2013 kt\u00f3re pozwalaj\u0105 u\u017cywa\u0107 stanu bez u\u017cycia klasy i ulepsza\u0107 inne funkcje, co daje bardziej czytelny i wielokrotnego u\u017cytku kod. Na przyk\u0142ad usuni\u0119cie konieczno\u015bci pakowania kodu w komponenty wy\u017cszego rz\u0119du w celu uzyskania dost\u0119pu do rejestr\u00f3w. A latem 2019 pojawi\u0142 si\u0119 WordPress<\/a>, uruchamiaj\u0105c niestandardowe hooki: Zalet haczyk\u00f3w jest wiele. Najcz\u0119stszym przyk\u0142adem jest umo\u017cliwienie korzystania ze stanu komponentu bez konieczno\u015bci pisania klasy JavaScript ( Przejd\u017amy od razu do kilku przyk\u0142ad\u00f3w i zobaczmy, jak zaimplementowa\u0107 Zacznijmy od W celach demonstracyjnych zaczn\u0119 od prostego przyk\u0142adu. Za\u0142\u00f3\u017cmy, \u017ce mam komponent blokowy, w kt\u00f3rym mam gdzie\u015b selektor post\u00f3w. Aby uzupe\u0142ni\u0107 list\u0119 wpis\u00f3w, musz\u0119 uzyska\u0107 dost\u0119p do rejestru \u201e Je\u015bli chc\u0119 kwestionowa\u0107 posty w bloku, musia\u0142bym zawin\u0105\u0107 m\u00f3j sk\u0142adnik w Nale\u017cy pami\u0119ta\u0107, \u017ce ten przyk\u0142ad kodu nie jest kompletny jako prawdziwy blok funkcjonalny lub wtyczka JS, zosta\u0142 usuni\u0119ty, aby pokaza\u0107 podstawowe koncepcje Jak wida\u0107 w linii Jak wspomniano wcze\u015bniej, ta metoda dzia\u0142a dobrze \u2013 i b\u0119dzie to robi\u0107 nadal. Ale ma to kilka wad. Po pierwsze, nie jest to \u0142atwe do zrozumienia. Jasne, to by\u0142 bardzo prosty przyk\u0142ad. Na pierwszy rzut oka na sam komponent nie masz pewno\u015bci, sk\u0105d Zr\u00f3bmy to lepiej za pomoc\u0105 hak\u00f3w.<\/p>\n Konwersja a Powy\u017cszy kod daje dok\u0142adnie taki sam wynik jak ten z Wa\u017cna uwaga<\/strong>: Przyjrzyjmy si\u0119 teraz Ponownie, dla cel\u00f3w demonstracyjnych, moje przyk\u0142ady kodu nie s\u0105 kompletnymi funkcjonalnymi fragmentami kodu \u2013 ilustruj\u0105 tylko cz\u0119\u015bci dotycz\u0105ce tych wzorc\u00f3w. W tym przyk\u0142adzie zak\u0142adam, \u017ce mam pole tekstowe pokazuj\u0105ce meta postu – i chc\u0119 zaktualizowa\u0107 warto\u015b\u0107 meta postu po zmianie.<\/p>\n Poniewa\u017c Na przyk\u0142ad:<\/p>\n W wierszu Ponownie widzimy, \u017ce kod nie jest tak prosty do zrozumienia. Musia\u0142by\u015b wiedzie\u0107, jak poszuka\u0107 opakowania, aby dowiedzie\u0107 si\u0119, z czego rekwizyt \u201e Zmiana Na przyk\u0142ad:<\/p>\n Na linii Mimo to u\u017cycie S\u0105 szanse, \u017ce je\u015bli u\u017cywasz Je\u015bli potrzebujesz u\u017cy\u0107 wielu komponent\u00f3w wy\u017cszego rz\u0119du owini\u0119tych wok\u00f3\u0142 twojego komponentu, najprawdopodobniej u\u017cyjesz jeszcze innej funkcji Gutenberga; Przyjrzyjmy si\u0119 pe\u0142niejszemu przyk\u0142adowi komponentu, kt\u00f3ry pobiera warto\u015b\u0107 meta posta w polu tekstowym i aktualizuje si\u0119, gdy jego warto\u015b\u0107 zostanie zmieniona. Zaczniemy od tego, jak musieliby\u015bmy si\u0119 do tego zabra\u0107 za pomoc\u0105 Na linii Jak wida\u0107, niezb\u0119dny kod poza naszym komponentem jest d\u0142u\u017cszy ni\u017c sam komponent. Nie wiem jak wy, ale dla mnie to troch\u0119 chaotyczne. Deweloperzy mog\u0105 zacz\u0105\u0107 czyta\u0107 ten kod od g\u00f3ry, nie widz\u0105c dolnej cz\u0119\u015bci, i zacz\u0105\u0107 si\u0119 zastanawia\u0107, sk\u0105d Przyjrzyjmy si\u0119, jak zamieniliby\u015bmy powy\u017cszy przyk\u0142ad na haki.<\/p>\n Jak pi\u0119kne i czytelne jest to?! Od razu widzimy w naszym komponencie, sk\u0105d Zauwa\u017c, \u017ce w Mam nadziej\u0119, \u017ce by\u0142o to dla kogo\u015b pouczaj\u0105ce i pomocne. Wci\u0105\u017c nie jestem zaznajomiony z haczykami, ale widz\u0105c korzy\u015bci z ich u\u017cywania, nie cofam si\u0119!<\/p>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>i\/lub [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. S\u0105 to komponenty wy\u017cszego rz\u0119du w WordPressie, kt\u00f3re umo\u017cliwiaj\u0105 dost\u0119p do sklep\u00f3w WordPressa w celu pobrania lub wypchni\u0119cia informacji, kt\u00f3re nieco wykraczaj\u0105 poza \u201enormalny" blok lub edycj\u0119 post\u00f3w. Prawdopodobnie zosta\u0142e\u015b r\u00f3wnie\u017c zmuszony do u\u017cycia compose<\/code>w celu po\u0142\u0105czenia swoich komponent z wieloma komponentami wy\u017cszego rz\u0119du. Je\u015bli Tw\u00f3j kod u\u017cywa tych wzorc\u00f3w, nie martw si\u0119 \u2013 dzia\u0142aj\u0105 doskonale i b\u0119d\u0105 dzia\u0142a\u0107 nadal! Ale w miar\u0119 rozwoju technologii mo\u017cemy dzia\u0142a\u0107 lepiej.<\/p>\n[useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>i [useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\nuseState<\/code>). Ale moim zdaniem najwi\u0119ksz\u0105 zalet\u0105 jest mo\u017cliwo\u015b\u0107 ponownego u\u017cycia. Eliminuj\u0105c konieczno\u015b\u0107 u\u017cywania wzorc\u00f3w, takich jak rekwizyty renderowania i komponenty wy\u017cszego rz\u0119du, komponenty mog\u0105 by\u0107 zapisywane w znacznie bardziej niezale\u017cnych fragmentach. Kolejn\u0105 zalet\u0105 hook\u00f3w jest to, \u017ce tw\u00f3j kod jest \u0142atwiejszy do odczytania i zrozumienia!<\/p>\nuseSelect<\/code>i useDispatch<\/code>zahaczy\u0107 w naszym kodzie!<\/p>\nRealizowanie
useSelect<\/code><\/h2>\nwithSelect<\/code>i odpowiadaj\u0105cego mu haka useSelect<\/code>. S\u0105 one u\u017cywane do pobierania w\u0142a\u015bciwo\u015bci wywodz\u0105cych si\u0119 ze stanu z zarejestrowanych selektor\u00f3w. Typowe przyk\u0142ady to dost\u0119p do selektor\u00f3w \u201e core<\/code>” lub \u201e core\/editor<\/code>” w celu wykonania zapyta\u0144 o posty (getEntityRecords<\/code>), dost\u0119p do meta postu (getEditedPostAttribute<\/code>) lub po prostu uzyskanie bie\u017c\u0105cego typu posta lub innych informacji.<\/p>\ncore<\/code>” i wykona\u0107 GetEntityRecords()<\/code>po\u0142\u0105czenie.<\/p>\nStary spos\u00f3b przy u\u017cyciu
withSelect<\/code><\/h3>\nwithSelect<\/code>. Zwykle robi si\u0119 to w export<\/code>o\u015bwiadczeniu.<\/p>\nwithSelect<\/code>. Je\u015bli szukasz praktycznych przyk\u0142ad\u00f3w kodu, mam inne artyku\u0142y, kt\u00f3re to opisuj\u0105: np. jak zaimplementowa\u0107 bloki z opcj\u0105 post select<\/a> lub jak doda\u0107 meta post do inspektora<\/a>. Te s\u0105 napisane za pomoc\u0105 withSelect<\/code>i withDispatch<\/code>, wi\u0119c zr\u00f3b to, a nast\u0119pnie wr\u00f3\u0107 tutaj, aby dowiedzie\u0107 si\u0119, jak przekszta\u0142ci\u0107 je w haki.<\/p>\nconst { 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#12-16<\/code>, owijam sw\u00f3j komponent za pomoc\u0105 withSelect<\/code>. Wewn\u0105trz funkcji withSelect mog\u0119 uzyska\u0107 dost\u0119p do sklepu, kt\u00f3ry chc\u0119, i zwracam zapytanie o post w rekwizycie \u201e somePosts<\/code>„. Ta podpora b\u0119dzie wtedy dost\u0119pna w moim AWP_Example_Plugin<\/code>komponencie (jak wida\u0107, zdestrukturyzowa\u0142em somePosts<\/code>z podp\u00f3r w wierszu #3<\/code>).<\/p>\nsomePosts<\/code>pochodzi rekwizyt lub co to jest. Musisz wiedzie\u0107, aby poszuka\u0107 instrukcji eksportu i sprawdzi\u0107, czy s\u0105 jakie\u015b opakowania. Czuje si\u0119 te\u017c troch\u0119 chaotyczny. Wykonujesz znaczn\u0105 cz\u0119\u015b\u0107 wa\u017cnej pracy poza swoim komponentem, aby uzyska\u0107 co\u015b, co naprawd\u0119 chcesz, aby by\u0142o dost\u0119pne w twoim komponencie.<\/p>\nKonwersja na
useSelect<\/code><\/h3>\nwithSelect<\/code>na useSelect<\/code>jest tak prosta, jak to tylko mo\u017cliwe. Pierwszym krokiem jest zdefiniowanie zmiennej somePosts<\/code>wewn\u0105trz naszego komponentu, a nie na zewn\u0105trz przez export<\/code>instrukcj\u0119. Drugim krokiem jest przeniesienie ca\u0142ej funkcji, kt\u00f3r\u0105 mieli\u015bmy withSelect<\/code>do useSelect<\/code>. I to wszystko.<\/p>\nconst { 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>\nwithSelect<\/code>. R\u00f3\u017cnica polega na tym, \u017ce kod jest teraz znacznie bardziej zrozumia\u0142y! Mo\u017cemy teraz bardzo \u0142atwo zobaczy\u0107, \u017ce zmienna somePosts<\/code>przechowuje wynik zapytania post, bezpo\u015brednio w naszym komponencie.<\/p>\nuseSelect<\/code>akceptuje drugi parametr; szereg zale\u017cno\u015bci. Zale\u017cno\u015bci to zmienne, kt\u00f3re zapewniaj\u0105, \u017ce uruchamiamy si\u0119 tylko wtedy, useSelect<\/code>gdy zmieni si\u0119 jedna z zale\u017cno\u015bci (warto\u015bci zmiennych). Ten fragment jest wa\u017cniejszy useDispatch<\/code>ni\u017c tutaj, wi\u0119c wyja\u015bni\u0119 to nieco dalej w useDispatch<\/code>sekcji poni\u017cej.<\/p>\nRealizowanie
useDispatch<\/code><\/h2>\nwithDispatch<\/code>i odpowiadaj\u0105cemu mu hakowi useDispatch<\/code>. S\u0142u\u017c\u0105 do wysy\u0142ania rekwizyt\u00f3w do rejestr\u00f3w. Na przyk\u0142ad m\u00f3wi\u0105c Gutenbergowi, aby zaktualizowa\u0142 meta postu za pomoc\u0105 \u201e core\/editor<\/code>„.<\/p>\nStary spos\u00f3b przy u\u017cyciu
withDispatch<\/code><\/h3>\nwithDispatch<\/code>jest to komponent wy\u017cszego rz\u0119du, musia\u0142bym owin\u0105\u0107 w to m\u00f3j komponent. Zwykle robi si\u0119 to w export<\/code>o\u015bwiadczeniu. Aby pole tekstowe dla naszej meta dzia\u0142a\u0142o,<\/p>\nconst { 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#20-26<\/code>zawijamy komponent do \u015brodka withDispatch<\/code>, w kt\u00f3rym zwracamy funkcj\u0119 \u201e setPostMeta<\/code>„, kt\u00f3ra wysy\u0142a meta posta (aby j\u0105 zaktualizowa\u0107). W wierszu #6<\/code>destrukturyzujemy podp\u00f3rk\u0119, aby mo\u017cna by\u0142o jej u\u017cy\u0107 w zdarzeniu pola tekstowego onChange<\/code>w wierszu #13<\/code>. (Pami\u0119taj, \u017ce powy\u017cszy przyk\u0142ad nie b\u0119dzie dzia\u0142a\u0142, poniewa\u017c ustawili\u015bmy warto\u015b\u0107 pola tekstowego na pusty ci\u0105g. To tylko po to, aby zademonstrowa\u0107, jak u\u017cyjemy wysy\u0142ki).<\/p>\nsetPostMeta<\/code>” jest lub z kt\u00f3rego pochodzi. Zr\u00f3bmy to lepiej za pomoc\u0105 hak\u00f3w!<\/p>\nKonwersja na
useDispatch<\/code><\/h3>\nwithDispatch<\/code>na useDispatch<\/code>nie jest tak prosta, jak withSelect<\/code>na useSelect<\/code>. Jednak nadal jest to do\u015b\u0107 \u0142atwe. Nale\u017cy pami\u0119ta\u0107 o dw\u00f3ch rzeczach. Jednym z nich jest to, \u017ce useDispatch<\/code>jako pierwszy parametr przyjmuje nazw\u0119 sklepu. onChange<\/code>Uzyskaliby\u015bmy wtedy dost\u0119p do sklepu i wywo\u0142aliby\u015bmy jego dost\u0119pne funkcje, gdy z niego korzystamy (np. w zdarzeniu pola tekstowego ). Po drugie, tablica zale\u017cno\u015bci od useDispatch<\/code>drugiego parametru jest wa\u017cniejsza ni\u017c z useSelect<\/code>. Mo\u017cesz ryzykowa\u0107, \u017ce kod sko\u0144czy si\u0119 w niesko\u0144czonej p\u0119tli, je\u015bli nie b\u0119dziesz prawid\u0142owo zarz\u0105dza\u0107 zale\u017cno\u015bciami. Dopiero po zmianie zmiennych zale\u017cno\u015bci skrypt zostanie ponownie uruchomiony useDispatch<\/code>.<\/p>\nconst { 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#8<\/code>destrukujemy to, czego potrzebujemy od sklepu ’ core\/editor<\/code>’. Interesuje nas tylko editPost<\/code>funkcja, kt\u00f3rej mo\u017cemy u\u017cy\u0107 do aktualizacji postu meta. Jako drugi parametr useDispatch<\/code>podajemy zale\u017cno\u015bci. Je\u015bli chodzi o przyk\u0142ad aktualizacji meta postu, u\u017cycie warto\u015bci meta posta (za pomoc\u0105 useSelect<\/code>) by\u0142oby idealne jako zale\u017cno\u015b\u0107. W tym przyk\u0142adzie ustawi\u0142em j\u0105 jako zmienn\u0105 fikcyjn\u0105. Poszukaj bardziej kompletnego i realistycznego przyk\u0142adu. A nast\u0119pnie w wierszu zdarzenia #16<\/code>pola tekstowego onChange<\/code>wywo\u0142ujemy editPost<\/code>aktualizacj\u0119 meta. Zwr\u00f3\u0107 uwag\u0119 na r\u00f3\u017cnic\u0119 w tej linii z u\u017cyciem withDispatch<\/code>powy\u017cej! Poniewa\u017c u\u017cywamy editPost<\/code>bezpo\u015brednio zamiast zwraca\u0107 funkcj\u0119 do aktualizacji meta postu dla nas (setPostMeta<\/code>), musimy dostarczy\u0107 obiekt zmeta<\/code>jako klucz, a nast\u0119pnie obiekt z meta postu, kt\u00f3ry chcemy zaktualizowa\u0107. Podzielili\u015bmy withDispatch<\/code>kod na kawa\u0142ki.<\/p>\nuseDispatch<\/code>sprawia, \u017ce \u200b\u200bkod jest znacznie bardziej czytelny i zrozumia\u0142y. Koniec z dodawaniem kodu poza naszym komponentem, kt\u00f3rego musimy u\u017cy\u0107 wewn\u0105trz.<\/p>\nPe\u0142niejszy przyk\u0142ad i eliminacja potrzeby
compose<\/code><\/h2>\nwithDispatch<\/code>, b\u0119dziesz potrzebowa\u0107 withSelect<\/code>r\u00f3wnie\u017c tego komponentu. W powy\u017cszych przyk\u0142adach do konwersji useDispatch<\/code>aktualizujemy warto\u015b\u0107 meta postu. Ale aby pole tekstowe dzia\u0142a\u0142o poprawnie (a tak\u017ce pokazywa\u0142o aktualn\u0105 warto\u015b\u0107), musieliby\u015bmy r\u00f3wnie\u017c pobra\u0107 warto\u015b\u0107 meta postu.<\/p>\n[compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. Jest to przydatna funkcja \u0142\u0105czenia wielu komponent\u00f3w wy\u017cszego rz\u0119du w jeden komponent wy\u017cszego rz\u0119du, wok\u00f3\u0142 kt\u00f3rego mo\u017cesz owin\u0105\u0107 sw\u00f3j komponent.<\/p>\nwithSelect<\/code>i withDispatch<\/code>(a wi\u0119c tak\u017ce compose<\/code>).<\/p>\nKorzystanie
withSelect<\/code>z, withDispatch<\/code>icompose<\/code><\/h3>\nconst { __ } = 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#21-34<\/code>komponujemy withSelect<\/code>i withDispatch<\/code>owijamy je wok\u00f3\u0142 naszego komponentu. postMeta<\/code>from withSelect<\/code>i setPostMeta<\/code>from withDispatch<\/code>s\u0105 teraz dost\u0119pne w naszym komponencie jako rekwizyty. Destrukujemy je na linii #7<\/code>i wykorzystujemy w #13<\/code>i #14<\/code>.<\/p>\npostMeta<\/code>i setPostMeta<\/code>sk\u0105d \u2013 wydaj\u0105 si\u0119 by\u0107 magicznie dost\u0119pne. Dla mnie jest to bardzo nieintuicyjne.<\/p>\nKorzystanie
useSelect<\/code>iuseDispatch<\/code><\/h3>\nconst { __ } = 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>\npostMeta<\/code>jest pobierany i jak uzyskujemy dost\u0119p do editPost<\/code>. Nasz komponent sta\u0142 si\u0119 r\u00f3wnie\u017c znacznie \u0142atwiejszy w ponownym u\u017cyciu.<\/p>\nuseDispatch<\/code>linii #12<\/code>dodajemy postmet\u0119, kt\u00f3r\u0105 aktualizujemy jako zale\u017cno\u015b\u0107 (postMeta.example_post_meta<\/code>). Je\u015bli mia\u0142by\u015b aktualizowa\u0107 wiele zmiennych meta postu w tym komponencie, musia\u0142by\u015b doda\u0107 ka\u017cd\u0105 z nich jako zale\u017cno\u015b\u0107, aby upewni\u0107 si\u0119, \u017ce wysy\u0142anie zostanie uruchomione (w\u0142a\u015bciwie zapisuj\u0105c meta post), gdy warto\u015b\u0107 jednej z nich ulegnie zmianie.<\/p>\n