Gutenberg: Actualización de withSelect y withDispatch en React Hooks (useSelect y useDispatch)

Esta publicación es una introducción rápida a una forma de mantener su código de Gutenberg a la altura de los estándares actuales mediante el uso de ganchos React. Veremos cómo esto es beneficioso, por qué debemos hacerlo y cómo.

¿Eh, ganchos?

Supongo que ya tiene algo de experiencia trabajando con bloques o complementos de Gutenberg un poco más complejos que consultan publicaciones, o recuperan y actualizan metadatos de publicaciones. Y así he estado trabajando con [withSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withSelect)y/o [withDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withDispatch). Estos son componentes de orden superior en WordPress que le permiten acceder a las tiendas de WordPress para obtener o enviar información que está un poco fuera del bloque "normal" o la edición posterior. Es posible que también se haya visto obligado a usar composepara combinar su componente con varios componentes de orden superior. Si su código utiliza estos patrones, no se preocupe, ¡funcionan perfectamente bien y seguirán funcionando! Pero a medida que avanza la tecnología, podemos hacerlo mejor.

A principios de 2019, React lanzó ganchos (versión 16.8), que le permiten usar el estado sin usar una clase y mejorar otras características que brindan un código más legible y reutilizable. Por ejemplo, eliminar la necesidad de envolver su código en componentes de orden superior para acceder a los registros. Y en el verano de 2019 le siguió WordPress, lanzando ganchos personalizados: [useDispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useDispatch)y [useSelect](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useSelect).

Los beneficios de los ganchos son muchos. El ejemplo más común es permitir usar el estado del componente sin tener que escribir una clase Javascript (useState). Pero en mi opinión, el mayor beneficio es la reutilización. Al eliminar la necesidad de usar patrones como accesorios de representación y componentes de orden superior, los componentes se pueden escribir en piezas mucho más independientes. ¡Otro beneficio de los ganchos es que hace que su código sea más fácil de leer y comprender!

¡Pasemos directamente a algunos ejemplos y veamos cómo implementar useSelecty useDispatchenlazar nuestro código!

ImplementaruseSelect

Empecemos por withSelecty su correspondiente gancho useSelect. Estos se utilizan para obtener accesorios derivados del estado de selectores registrados. Los ejemplos comunes son acceder a los selectores ‘ core‘ o ‘ core/editor‘ para realizar consultas de publicaciones (getEntityRecords), acceder a la publicación meta (getEditedPostAttribute) o simplemente obtener el tipo de publicación actual u otra información.

Para fines de demostración, comenzaré con un ejemplo simple. Supongamos que tengo un componente de bloque donde tengo un selector de publicación en alguna parte. Para completar las opciones de publicación, necesito acceder al registro ‘ core‘ y realizar una GetEntityRecords()llamada.

Uso antiguowithSelect

Si quiero consultar publicaciones en un bloque, necesitaría envolver mi componente en withSelect. Esto se hace comúnmente en la exportdeclaración.

Tenga en cuenta que este ejemplo de código no está completo como un bloque funcional real o complemento JS, se ha eliminado para mostrar los conceptos básicos de withSelect. Si está buscando ejemplos prácticos de código, tengo otros artículos que cubren esto: por ejemplo, cómo implementar bloques con una selección de publicación, o cómo agregar meta meta al inspector. Esos están escritos con withSelecty withDispatch, también hágalos, y luego regrese aquí para aprender cómo transformarlos en ganchos.

Como puede ver en la línea #12-16, envuelvo mi componente con withSelect. Dentro de la función withSelect puedo acceder a la tienda que quiero y devuelvo una consulta de publicación en el accesorio " somePosts". Este accesorio estará disponible dentro de mi AWP_Example_Plugincomponente (como puede ver, lo desestructuraré somePostsde los accesorios en la línea #3).

Como se mencionó anteriormente, este método funciona bien y continuará haciéndolo. Pero hay varias desventajas con esto. Una es que esto no es muy fácil de entender. Claro, este fue un ejemplo muy simple. A primera vista del componente en sí, no está seguro de dónde somePostsproviene el accesorio o qué es. Tendría que saber buscar la declaración de exportación y ver si hay algún contenedor. También se siente un poco desarticulado. Hace una gran parte del trabajo importante fuera de su componente, para algo que realmente desea que esté disponible dentro de su componente.

Hagámoslo mejor usando ganchos.

Convirtiendo enuseSelect

Convertir a withSelecten useSelectes tan simple como parece. El primer paso es que podemos definir la variable somePostsdentro de nuestro componente, en lugar de afuera por la exportdeclaración. El segundo paso es mover toda la función que teníamos withSelecten useSelect. Y eso es.

El código anterior proporciona exactamente el mismo resultado que el que tiene withSelect. ¡La diferencia es que el código ahora es mucho más comprensible! Ahora podemos ver muy fácilmente que la variable somePostsestá almacenando el resultado de una consulta posterior, justo dentro de nuestro componente.

Nota importante: useSelectacepta un segundo parámetro; una serie de dependencias. Las dependencias son variables que aseguran que solo se ejecuten useSelectcuando una de las dependencias (valores de variable) haya cambiado. Este bit es más importante useDispatchque aquí, por lo que lo explicaré con más detalle en la useDispatchsección a continuación.

ImplementaruseDispatch

Ahora echemos un vistazo a withDispatchy su gancho correspondiente useDispatch. Se utilizan para enviar accesorios a los registros. Por ejemplo, decirle a Gutenberg que actualice una publicación meta a través de ‘ core/editor‘.

Nuevamente, para fines de demostración, mis ejemplos de código no son piezas de código funcionales completas: ilustran solo las partes relacionadas con estos patrones. En este ejemplo, asumo que tengo un campo de texto que muestra una publicación meta, y deseo actualizar el valor meta de la publicación al cambiar.

Uso antiguowithDispatch

Como withDispatches un componente de orden superior, necesitaría envolver mi componente dentro de esto. Esto se hace comúnmente en la exportdeclaración. Para hacer que el campo de texto para nuestro meta trabajo,

Por ejemplo:

En línea #20-26, envolvemos el componente dentro withDispatch, en el que devolvemos una función ” setPostMeta" que despacha post meta (para actualizarlo). En línea #6, desestructuramos el accesorio para que podamos usarlo en el onChangeevento del campo de texto en línea #13. (Tenga en cuenta que el ejemplo anterior no sería funcional porque establecemos el valor del campo de texto en una cadena vacía. Esto es solo para demostrar cómo usaríamos el envío).

Una vez más, podemos ver que el código no es tan sencillo de entender. Tendría que saber buscar el envoltorio para averiguar de qué setPostMetaes o de qué proviene el accesorio " ". ¡Hagámoslo mejor usando ganchos!

Convirtiendo enuseDispatch

Cambiar withDispatcha useDispatchno es tan sencillo como convertir withSelecta useSelect. Sin embargo, todavía es bastante fácil. Hay dos cosas a tener en cuenta. Una es que useDispatchtoma el nombre de una tienda como primer parámetro. Luego accederíamos a la tienda y llamaríamos a sus funciones disponibles cuando las usemos (por ejemplo, en un onChangeevento de un campo de texto). En segundo lugar, la matriz de dependencias con useDispatchel segundo parámetro es más importante que con useSelect. Puede correr el riesgo de que su código termine en un bucle eterno si no administra las dependencias correctamente. Solo cuando se cambien las variables de dependencia, el script se volverá a ejecutar useDispatch.

Por ejemplo:

En línea #8desestructuramos lo que necesitamos de la tienda ‘ core/editor‘. Solo estamos interesados ​​​​en la editPostfunción que podemos usar para actualizar la publicación meta. Como segundo parámetro useDispatchproporcionamos dependencias. En cuanto a un ejemplo de actualización de la publicación meta, usar el valor de la publicación meta (usando useSelect) sería perfecto como dependencia. En este ejemplo, lo configuré como una variable ficticia. Mire más abajo para ver un ejemplo más completo y realista. Y luego, en #16la línea del evento del campo de texto onChange, llamamos editPostpara actualizar el meta. ¡ Observe la diferencia en esta línea con el uso withDispatchanterior! Dado que usamos editPostdirectamente en lugar de devolver una función para actualizar la publicación meta para nosotros (setPostMeta), debemos proporcionar un objeto conmetacomo clave y luego un objeto con la publicación meta que queremos actualizar. Tenemos una especie de división del withDispatchcódigo en partes.

Aún así, el uso useDispatchhace que el código sea mucho más legible y comprensible. No se agrega más código fuera de nuestro componente que necesitamos usar dentro.

Un ejemplo más completo y eliminando la necesidad decompose

Lo más probable es que si está utilizando withDispatch, también necesitará withSelectese componente. En los ejemplos para convertir a useDispatchlos anteriores, estamos actualizando un metavalor de publicación. Pero para que el campo de texto funcione correctamente (y también muestre el valor actual), también necesitaríamos obtener el valor meta de la publicación.

Si necesita usar múltiples componentes de orden superior envueltos alrededor de su componente, lo más probable es que use otra función de Gutenberg; [compose](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-compose/). Es una función útil para combinar múltiples componentes de orden superior en un componente de orden superior que puede envolver su componente.

Veamos un ejemplo más completo de un componente que obtiene un metavalor de publicación en un campo de texto y se actualiza cuando se cambia su valor. Comenzamos con cómo tendríamos que hacerlo usando withSelecty withDispatch(y por lo tanto también compose).

Usando withSelect, withDispatchycompose

En línea #21-34, componemos withSelecty withDispatchlos envolvemos alrededor de nuestro componente. postMetafrom withSelecty setPostMetafrom withDispatchahora están disponibles en nuestro componente como accesorios. Los desestructuramos en línea #7y los usamos en #13y #14.

Como puede ver, el código necesario fuera de nuestro componente es más largo que el propio componente. No sé ustedes, pero para mí se siente un poco inconexo. Los desarrolladores pueden comenzar a leer este código desde la parte superior, sin ver la parte inferior, y comenzar a preguntarse de dónde postMetay de dónde setPostMetaprovienen; parecen estar mágicamente disponibles. Para mí esto es muy poco intuitivo.

Veamos cómo convertiríamos el ejemplo anterior en ganchos.

usando useSelectyuseDispatch

¡¿Qué tan hermoso y legible es eso?! Podemos ver de inmediato en nuestro componente de dónde postMetase obtiene y cómo accedemos a editPost. Nuestro componente también se volvió mucho más fácil de reutilizar.

Tenga en cuenta que en useDispatchlínea #12agregamos el postmeta que estamos actualizando como dependencia (postMeta.example_post_meta). Si tuviera que mantener varias metavariables de publicación actualizadas en este componente, tendría que agregar cada una como una dependencia para asegurarse de que el envío se ejecute (en realidad guardando la metadatación de publicación) cuando cambie el valor de una de ellas.

Espero que esto haya sido informativo y útil para alguien por ahí. Todavía no estoy familiarizado con los ganchos, pero al ver los beneficios de usarlos, ¡no voy a dar marcha atrás!