Esta publicaci\u00f3n es una introducci\u00f3n r\u00e1pida a una forma de mantener su c\u00f3digo de Gutenberg a la altura de los est\u00e1ndares actuales mediante el uso de ganchos React. Veremos c\u00f3mo esto es beneficioso, por qu\u00e9 debemos hacerlo y c\u00f3mo.<\/p>\n
Supongo que ya tiene algo de experiencia trabajando con bloques o complementos de Gutenberg un poco m\u00e1s complejos que consultan publicaciones, o recuperan y actualizan metadatos de publicaciones. Y as\u00ed he estado trabajando con A principios de 2019, React lanz\u00f3 ganchos<\/a> (versi\u00f3n 16.8), que le permiten usar el estado sin usar una clase y mejorar otras caracter\u00edsticas que brindan un c\u00f3digo m\u00e1s legible y reutilizable. Por ejemplo, eliminar la necesidad de envolver su c\u00f3digo en componentes de orden superior para acceder a los registros. Y en el verano de 2019 le sigui\u00f3 WordPress<\/a>, lanzando ganchos personalizados: Los beneficios de los ganchos son muchos. El ejemplo m\u00e1s com\u00fan es permitir usar el estado del componente sin tener que escribir una clase Javascript ( \u00a1Pasemos directamente a algunos ejemplos y veamos c\u00f3mo implementar Empecemos por Para fines de demostraci\u00f3n, comenzar\u00e9 con un ejemplo simple. Supongamos que tengo un componente de bloque donde tengo un selector de publicaci\u00f3n en alguna parte. Para completar las opciones de publicaci\u00f3n, necesito acceder al registro ‘ Si quiero consultar publicaciones en un bloque, necesitar\u00eda envolver mi componente en Tenga en cuenta que este ejemplo de c\u00f3digo no est\u00e1 completo como un bloque funcional real o complemento JS, se ha eliminado para mostrar los conceptos b\u00e1sicos de Como puede ver en la l\u00ednea Como se mencion\u00f3 anteriormente, este m\u00e9todo funciona bien y continuar\u00e1 haci\u00e9ndolo. Pero hay varias desventajas con esto. Una es que esto no es muy f\u00e1cil de entender. Claro, este fue un ejemplo muy simple. A primera vista del componente en s\u00ed, no est\u00e1 seguro de d\u00f3nde Hag\u00e1moslo mejor usando ganchos.<\/p>\n Convertir a El c\u00f3digo anterior proporciona exactamente el mismo resultado que el que tiene Nota importante<\/strong>: Ahora echemos un vistazo a Nuevamente, para fines de demostraci\u00f3n, mis ejemplos de c\u00f3digo no son piezas de c\u00f3digo funcionales completas: ilustran solo las partes relacionadas con estos patrones. En este ejemplo, asumo que tengo un campo de texto que muestra una publicaci\u00f3n meta, y deseo actualizar el valor meta de la publicaci\u00f3n al cambiar.<\/p>\n Como Por ejemplo:<\/p>\n En l\u00ednea Una vez m\u00e1s, podemos ver que el c\u00f3digo no es tan sencillo de entender. Tendr\u00eda que saber buscar el envoltorio para averiguar de qu\u00e9 Cambiar Por ejemplo:<\/p>\n En l\u00ednea A\u00fan as\u00ed, el uso Lo m\u00e1s probable es que si est\u00e1 utilizando Si necesita usar m\u00faltiples componentes de orden superior envueltos alrededor de su componente, lo m\u00e1s probable es que use otra funci\u00f3n de Gutenberg; Veamos un ejemplo m\u00e1s completo de un componente que obtiene un metavalor de publicaci\u00f3n en un campo de texto y se actualiza cuando se cambia su valor. Comenzamos con c\u00f3mo tendr\u00edamos que hacerlo usando En l\u00ednea Como puede ver, el c\u00f3digo necesario fuera de nuestro componente es m\u00e1s largo que el propio componente. No s\u00e9 ustedes, pero para m\u00ed se siente un poco inconexo. Los desarrolladores pueden comenzar a leer este c\u00f3digo desde la parte superior, sin ver la parte inferior, y comenzar a preguntarse de d\u00f3nde Veamos c\u00f3mo convertir\u00edamos el ejemplo anterior en ganchos.<\/p>\n \u00a1\u00bfQu\u00e9 tan hermoso y legible es eso?! Podemos ver de inmediato en nuestro componente de d\u00f3nde Tenga en cuenta que en Espero que esto haya sido informativo y \u00fatil para alguien por ah\u00ed. Todav\u00eda no estoy familiarizado con los ganchos, pero al ver los beneficios de usarlos, \u00a1no voy a dar marcha atr\u00e1s!<\/p>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>y\/o [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. Estos son componentes de orden superior en WordPress que le permiten acceder a las tiendas de WordPress para obtener o enviar informaci\u00f3n que est\u00e1 un poco fuera del bloque "normal" o la edici\u00f3n posterior. Es posible que tambi\u00e9n se haya visto obligado a usar compose<\/code>para combinar su componente con varios componentes de orden superior. Si su c\u00f3digo utiliza estos patrones, no se preocupe, \u00a1funcionan perfectamente bien y seguir\u00e1n funcionando! Pero a medida que avanza la tecnolog\u00eda, podemos hacerlo mejor.<\/p>\n[useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>y [useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\nuseState<\/code>). Pero en mi opini\u00f3n, el mayor beneficio es la reutilizaci\u00f3n. Al eliminar la necesidad de usar patrones como accesorios de representaci\u00f3n y componentes de orden superior, los componentes se pueden escribir en piezas mucho m\u00e1s independientes. \u00a1Otro beneficio de los ganchos es que hace que su c\u00f3digo sea m\u00e1s f\u00e1cil de leer y comprender!<\/p>\nuseSelect<\/code>y useDispatch<\/code>enlazar nuestro c\u00f3digo!<\/p>\nImplementar
useSelect<\/code><\/h2>\nwithSelect<\/code>y su correspondiente gancho useSelect<\/code>. Estos se utilizan para obtener accesorios derivados del estado de selectores registrados. Los ejemplos comunes son acceder a los selectores ‘ core<\/code>‘ o ‘ core\/editor<\/code>‘ para realizar consultas de publicaciones (getEntityRecords<\/code>), acceder a la publicaci\u00f3n meta (getEditedPostAttribute<\/code>) o simplemente obtener el tipo de publicaci\u00f3n actual u otra informaci\u00f3n.<\/p>\ncore<\/code>‘ y realizar una GetEntityRecords()<\/code>llamada.<\/p>\nUso antiguo
withSelect<\/code><\/h3>\nwithSelect<\/code>. Esto se hace com\u00fanmente en la export<\/code>declaraci\u00f3n.<\/p>\nwithSelect<\/code>. Si est\u00e1 buscando ejemplos pr\u00e1cticos de c\u00f3digo, tengo otros art\u00edculos que cubren esto: por ejemplo, c\u00f3mo implementar bloques con una selecci\u00f3n de publicaci\u00f3n<\/a>, o c\u00f3mo agregar meta meta al inspector<\/a>. Esos est\u00e1n escritos con withSelect<\/code>y withDispatch<\/code>, tambi\u00e9n h\u00e1galos, y luego regrese aqu\u00ed para aprender c\u00f3mo transformarlos en ganchos.<\/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>, envuelvo mi componente con withSelect<\/code>. Dentro de la funci\u00f3n withSelect puedo acceder a la tienda que quiero y devuelvo una consulta de publicaci\u00f3n en el accesorio " somePosts<\/code>". Este accesorio estar\u00e1 disponible dentro de mi AWP_Example_Plugin<\/code>componente (como puede ver, lo desestructurar\u00e9 somePosts<\/code>de los accesorios en la l\u00ednea #3<\/code>).<\/p>\nsomePosts<\/code>proviene el accesorio o qu\u00e9 es. Tendr\u00eda que saber buscar la declaraci\u00f3n de exportaci\u00f3n y ver si hay alg\u00fan contenedor. Tambi\u00e9n se siente un poco desarticulado. Hace una gran parte del trabajo importante fuera de su componente, para algo que realmente desea que est\u00e9 disponible dentro de su componente.<\/p>\nConvirtiendo en
useSelect<\/code><\/h3>\nwithSelect<\/code>en useSelect<\/code>es tan simple como parece. El primer paso es que podemos definir la variable somePosts<\/code>dentro de nuestro componente, en lugar de afuera por la export<\/code>declaraci\u00f3n. El segundo paso es mover toda la funci\u00f3n que ten\u00edamos withSelect<\/code>en useSelect<\/code>. Y eso es.<\/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>. \u00a1La diferencia es que el c\u00f3digo ahora es mucho m\u00e1s comprensible! Ahora podemos ver muy f\u00e1cilmente que la variable somePosts<\/code>est\u00e1 almacenando el resultado de una consulta posterior, justo dentro de nuestro componente.<\/p>\nuseSelect<\/code>acepta un segundo par\u00e1metro; una serie de dependencias. Las dependencias son variables que aseguran que solo se ejecuten useSelect<\/code>cuando una de las dependencias (valores de variable) haya cambiado. Este bit es m\u00e1s importante useDispatch<\/code>que aqu\u00ed, por lo que lo explicar\u00e9 con m\u00e1s detalle en la useDispatch<\/code>secci\u00f3n a continuaci\u00f3n.<\/p>\nImplementar
useDispatch<\/code><\/h2>\nwithDispatch<\/code>y su gancho correspondiente useDispatch<\/code>. Se utilizan para enviar accesorios a los registros. Por ejemplo, decirle a Gutenberg que actualice una publicaci\u00f3n meta a trav\u00e9s de ‘ core\/editor<\/code>‘.<\/p>\nUso antiguo
withDispatch<\/code><\/h3>\nwithDispatch<\/code>es un componente de orden superior, necesitar\u00eda envolver mi componente dentro de esto. Esto se hace com\u00fanmente en la export<\/code>declaraci\u00f3n. Para hacer que el campo de texto para nuestro meta trabajo,<\/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>, envolvemos el componente dentro withDispatch<\/code>, en el que devolvemos una funci\u00f3n \u00bb setPostMeta<\/code>" que despacha post meta (para actualizarlo). En l\u00ednea #6<\/code>, desestructuramos el accesorio para que podamos usarlo en el onChange<\/code>evento del campo de texto en l\u00ednea #13<\/code>. (Tenga en cuenta que el ejemplo anterior no ser\u00eda funcional porque establecemos el valor del campo de texto en una cadena vac\u00eda. Esto es solo para demostrar c\u00f3mo usar\u00edamos el env\u00edo).<\/p>\nsetPostMeta<\/code>es o de qu\u00e9 proviene el accesorio " ". \u00a1Hag\u00e1moslo mejor usando ganchos!<\/p>\nConvirtiendo en
useDispatch<\/code><\/h3>\nwithDispatch<\/code>a useDispatch<\/code>no es tan sencillo como convertir withSelect<\/code>a useSelect<\/code>. Sin embargo, todav\u00eda es bastante f\u00e1cil. Hay dos cosas a tener en cuenta. Una es que useDispatch<\/code>toma el nombre de una tienda como primer par\u00e1metro. Luego acceder\u00edamos a la tienda y llamar\u00edamos a sus funciones disponibles cuando las usemos (por ejemplo, en un onChange<\/code>evento de un campo de texto). En segundo lugar, la matriz de dependencias con useDispatch<\/code>el segundo par\u00e1metro es m\u00e1s importante que con useSelect<\/code>. Puede correr el riesgo de que su c\u00f3digo termine en un bucle eterno si no administra las dependencias correctamente. Solo cuando se cambien las variables de dependencia, el script se volver\u00e1 a ejecutar 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>desestructuramos lo que necesitamos de la tienda ‘ core\/editor<\/code>‘. Solo estamos interesados \u200b\u200b\u200b\u200ben la editPost<\/code>funci\u00f3n que podemos usar para actualizar la publicaci\u00f3n meta. Como segundo par\u00e1metro useDispatch<\/code>proporcionamos dependencias. En cuanto a un ejemplo de actualizaci\u00f3n de la publicaci\u00f3n meta, usar el valor de la publicaci\u00f3n meta (usando useSelect<\/code>) ser\u00eda perfecto como dependencia. En este ejemplo, lo configur\u00e9 como una variable ficticia. Mire m\u00e1s abajo para ver un ejemplo m\u00e1s completo y realista. Y luego, en #16<\/code>la l\u00ednea del evento del campo de texto onChange<\/code>, llamamos editPost<\/code>para actualizar el meta. \u00a1 Observe la diferencia en esta l\u00ednea con el uso withDispatch<\/code>anterior! Dado que usamos editPost<\/code>directamente en lugar de devolver una funci\u00f3n para actualizar la publicaci\u00f3n meta para nosotros (setPostMeta<\/code>), debemos proporcionar un objeto conmeta<\/code>como clave y luego un objeto con la publicaci\u00f3n meta que queremos actualizar. Tenemos una especie de divisi\u00f3n del withDispatch<\/code>c\u00f3digo en partes.<\/p>\nuseDispatch<\/code>hace que el c\u00f3digo sea mucho m\u00e1s legible y comprensible. No se agrega m\u00e1s c\u00f3digo fuera de nuestro componente que necesitamos usar dentro.<\/p>\nUn ejemplo m\u00e1s completo y eliminando la necesidad de
compose<\/code><\/h2>\nwithDispatch<\/code>, tambi\u00e9n necesitar\u00e1 withSelect<\/code>ese componente. En los ejemplos para convertir a useDispatch<\/code>los anteriores, estamos actualizando un metavalor de publicaci\u00f3n. Pero para que el campo de texto funcione correctamente (y tambi\u00e9n muestre el valor actual), tambi\u00e9n necesitar\u00edamos obtener el valor meta de la publicaci\u00f3n.<\/p>\n[compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. Es una funci\u00f3n \u00fatil para combinar m\u00faltiples componentes de orden superior en un componente de orden superior que puede envolver su componente.<\/p>\nwithSelect<\/code>y withDispatch<\/code>(y por lo tanto tambi\u00e9n compose<\/code>).<\/p>\nUsando
withSelect<\/code>, withDispatch<\/code>ycompose<\/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>, componemos withSelect<\/code>y withDispatch<\/code>los envolvemos alrededor de nuestro componente. postMeta<\/code>from withSelect<\/code>y setPostMeta<\/code>from withDispatch<\/code>ahora est\u00e1n disponibles en nuestro componente como accesorios. Los desestructuramos en l\u00ednea #7<\/code>y los usamos en #13<\/code>y #14<\/code>.<\/p>\npostMeta<\/code>y de d\u00f3nde setPostMeta<\/code>provienen; parecen estar m\u00e1gicamente disponibles. Para m\u00ed esto es muy poco intuitivo.<\/p>\nusando
useSelect<\/code>yuseDispatch<\/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>se obtiene y c\u00f3mo accedemos a editPost<\/code>. Nuestro componente tambi\u00e9n se volvi\u00f3 mucho m\u00e1s f\u00e1cil de reutilizar.<\/p>\nuseDispatch<\/code>l\u00ednea #12<\/code>agregamos el postmeta que estamos actualizando como dependencia (postMeta.example_post_meta<\/code>). Si tuviera que mantener varias metavariables de publicaci\u00f3n actualizadas en este componente, tendr\u00eda que agregar cada una como una dependencia para asegurarse de que el env\u00edo se ejecute (en realidad guardando la metadataci\u00f3n de publicaci\u00f3n) cuando cambie el valor de una de ellas.<\/p>\n