Introducción a React, Parte 3

La semana pasada vi que un componente React no es más que la representación gráfica de (Parte A) de nuestra aplicación. En el ejemplo que implementé, un componente mostró el valor de un medidor junto con dos botones que permitieron el aumento o disminución de este valor. El truco fue simple: los elementos de accesorios de un componente pueden ser dados y funciones. Hasta ahora, las dos ideas principales que he aprendido de la Parte 1 y la Parte 2 de este tutorial son:
Un componente React es una función pura que recibe un conjunto de propiedades y genera el código HTML necesario para reproducirlo.
Las propiedades que recibe un componente React puede ser (a) los datos que deben mostrar en la interfaz de uso y (b) funciones que, una vez conectadas como llamadas a los eventos DOM, cambia el estado de nuestra aplicación.
Bueno, en esta tercera parte ampliaremos nuestro conocimiento un poco más sobre esta arquitectura y aprenderemos a usar las tiendas de WordPress. Con ellos, podemos definir el estado de nuestra aplicación de una manera limpia, testible e independiente.
La extensión de nuestro ejemplo en la segunda parte de este tutorial creamos un medidor con algunos botones para aumentar o reducir su valor. Para hacer esto, hemos agregado una variable mutable al archivo index.js junto con una función para cambiarlo. Nuestro componente del medidor: Export const contador = ({valor, tress, ondeCresase}) => (
contador: {valor}
+ –
); Luego podría recibir todos los accesorios que necesitaba: // Importencias de importación Importar {render} de ‘@WordPress/Element’; Import {contador} de ‘./Components/counter’; // Almacenamiento Valor de Let Value = 0; Función setValue (newValue) {value = newValue; } // Renderizar componente en DOM const wrapper = document.getementById (‘react-exame-wrapper’); render ( setValue (valor + 1)} onDecrease = {() => setValue (valor – 1)} />, wrapper); Bueno, hoy aprenderemos cómo podemos implementar la administración estatal de manera correcta y mejor. Pero primero, permítame dirigir un ejemplo más complejo: expandir nuestra aplicación para que puedan tener varios medidores simultáneamente y ver cómo podemos administrarlos todos usando una tienda de WordPress. El resultado final (que implementaremos en la próxima publicación) se verá similar:
Múltiples medidores implementados con componentes React y un PlayPress basado en Redux.

Definición del estado de nuestra aplicación Cuando enfrenta un problema como este, lo primero que debe pensar es en cómo administrará el estado de su aplicación y, suponiendo que pueda leer y escribir solo el estado, la forma más sencilla de hacerlo es pensar Acerca de su API: es decir, las funciones que le permiten interrogarlo y actualizarla. En nuestro caso podría sugerir: agregar un nuevo medidor
Eliminar el mostrador x
Establezca el valor del medidor x
Obtenga una lista de todos los contadores que tiene nuestra aplicación
Obtener el valor del mostrador x
Pero es posible que desee utilizar un enfoque diferente (por ejemplo, es posible que desee crear una función para aumentar un cierto recuento y una función diferente para su decreto).
Una vez que haya definido esta interfaz, debe pensar en la información que necesita para realizar un seguimiento de esta condición y, en particular, la estructura de datos que usará para hacer. En nuestro ejemplo, queremos realizar un seguimiento de varios metros y, para cada metro X, queremos saber su valor. ¿Qué estructuras de datos podrían ayudarnos en este esfuerzo? Dependiendo de lo que sea este x, es posible que desee usar una estructura de datos u otra. Si, por ejemplo, X es el índice del medidor (es decir, desea tomar el valor del primer, segundo o tercer metro), una matriz de números podría ser suficiente. Si desea que X sea un identificador de medidor único, es posible que desee utilizar un enfoque diferente. Por ejemplo, es posible que desee usar un diccionario con Diccionario ID/Valor:
Const Counters = {ae13a: 0, f18bb: 3, e889a: 1, 8b1d3: -5,}; O una serie de objetos: const contraters = [{id: ‘ae13a’, valor: 0}, {id: ‘f18bb’, valor: 3}, {id: ‘e889a’, valor: 1}, {id: ‘ 8b1d3 ‘, valor: -5},]; Si primero define la interfaz (setters y getters, si lo desea) para manipular y acceder a la condición de su aplicación, entonces la forma en que implementa la condición en sí es una caja negra. Esto significa que puede cambiar la tienda en sí mismo en cualquier momento y las cosas funcionarán de acuerdo con las expectativas, siempre que mantenga la API. La creación de una tienda basada en Rodux con WordPress WordPress Data Module le permite definir una o más tiendas para administrar el estado de su aplicación.: Un nombre que identifica de manera exclusiva su tienda
Un objeto de selectores con todos los getters para tomar datos del almacén
Un objeto de acción con una función que desencadena solicitudes de actualización (hablaremos sobre lo que eso significa más adelante en esta publicación)
Una función de descuento que es responsable de actualizar el estado cuando se activan ciertas acciones
Veamos un ejemplo real, ¿verdad? Continuando con el ejemplo la semana pasada, cree una nueva tienda de carpetas en SRC. Luego cree un archivo index.js en él con el siguiente código: // Load dependencias import {registreStore} de ‘@wordpress/data’; Reductor de importación de ‘./reducer’; Importar * como acciones de ‘./acciones’; Import * como selectores de ‘./selectors’; RegisterStore (‘React-Example/Council’, {Acciones, reductor, selectores,}); El fragmento es bastante simple, ¿no? Simplemente importamos la función registradora de la que estábamos hablando y algunas adicciones que aún no hemos creado (reductor, acciones y selectores) y registrar la nueva tienda. Observe cómo llamamos a la tienda para asegurarnos de que sea único: combinamos el nombre de nuestro complemento (react-ejemplo) con una palabra que define lo que está en la tienda (consejo). ¡Fácil de caminar! Acciones en una tienda Una de las cosas que cada tienda necesita es un conjunto de funciones que nos permiten cambiar su condición. En nuestro ejemplo, las acciones estarán en src/store/action.js: exportar función addcounter (contraid) {return {type: ‘add_counter’, contraid,}; } Exportar función removeCounter (contraid) {return {type: ‘remove_counter’, contraid,}; } Exportar función setCounterValue (contraid, valor) {return {type: ‘set_counter_value’, contraid, valor,}; } Como se esperaba, nuestra tienda tiene tres acciones para actualizar su estado:
Addcounter: una función que agrega nuevos contadores a nuestra tienda. El único argumento necesario es la identificación del nuevo medidor.
RemoveCounter: una función que elimina un medidor existente. Nuevamente, el único argumento necesario es la identificación del medidor que queremos eliminar. Obviamente, esta función tiene dos argumentos: la identificación del medidor a actualizar y su nuevo valor.
Ahora, si observa de cerca cada acción, puede sorprenderse: ninguna de estas acciones parece actualizar nada. En cambio, devuelven objetos. ¿Que está pasando aqui?
En Rodux (y las tiendas de WordPress se basan en Redux), las acciones no cambian directamente una tienda. En cambio, genera un objeto que señala una “solicitud de actualización”. Estas solicitudes siempre siguen el mismo modelo: soy un objeto con un atributo de tipo que identifica de manera única la solicitud y cuántas propiedades adicionales son necesarias para aplicar con éxito la actualización solicitada. Entonces, veamos ahora cómo la condición puede actualizar … la implementación del reductor para actualizar el estado de una tienda si las acciones de la tienda representan solo una solicitud de actualización, necesitamos a alguien o algo para actualizar la condición de nuestra tienda cuando tal a la solicitud se envía. Para esto, se usa un reductor.

Un reductor es una función que se hace cargo del estado actual de nuestra aplicación y una acción que alguien ha enviado y actualiza el estado aplicando la actualización solicitada. En la sección anterior vi que nuestra tienda tiene tres acciones, por lo que nuestro reductor debe poder aplicar cada uno de ellos: importar} de ‘lodash’; Exportar Función predeterminada Reducer (State = {}, Action) {switch (Action.Type) {Houses ‘add_counter’: return {… state, [action.counterid]: 0,}; casas ‘remve_counter’: return omit (state, action.counterid); Houses ‘set_counter_value’: return {… state, [action.counterid]: action.value,}; } Estados de retorno; } Como puede ver, el reductor recibe estados anteriores (que, por cierto, es implícitamente el objeto vacío {}) y la acción enviada con la información de actualización de estado. El cuerpo del reductor es bastante simple: comienza con una instrucción de interruptor para discernir el tipo de actualización (Action.Type) que debemos ejecutar:
Si es add_counter, genera un nuevo objeto de estados con una nueva acción clave. Counterid con el valor del medidor establecido en 0.
Si es remve_counter, genera un nuevo objeto de estados sin la acción clave.
Si es set_counter_value, genera un nuevo objeto de estados en el que el valor de la acción. CounterId ahora se establece en Action.Value.
Lo más importante aquí es darse cuenta de que un reductor es (y debe ser) una función pura. Esto significa que cualquier modificación que hagamos el estado actual implica la construcción de un nuevo estado. Por lo tanto, de ninguna manera debe cambiar la condición anterior. Selectores en una tienda ahora que sabe cómo actualizar la condición de su tienda, todo lo que tiene que aprender es cómo interrogarla. Simplemente defina un selectors.js con las funciones de consulta que necesita: Exportar función getCounterids (estado) {return Object.Keys (estado); } Función de exportación getCounterValue (State, CounterId) {State de retorno [contraid]; } ¡Y eso es! Bastante obviamente, ¿verdad? Los selectores de la tienda son funciones que toman (al menos) un argumento (estado de la tienda) y devuelven un cierto valor. Obviamente, los selectores pueden tener más argumentos si tiene que devolver un cierto valor de su tienda en nuestro caso, por ejemplo, hemos creado dos selectores: GetCounterids devuelve una matriz de identificadores de medidores. Debido a que hemos implementado la tienda utilizando un diccionario/objeto, simplemente estamos interesados ​​en devolver objetos.
GetCounterValue devuelve el valor específico de un medidor dado. Esta función toma dos argumentos (los estados actuales de nuestra aplicación y la identificación del medidor que estamos interesados) y devuelve el valor solicitado.
Cómo probar nuestro almacén para probar si la tienda funciona correctamente, abra el src/index.js e importar archivo: // importe dependencias import {render} de ‘@wordpress/element’; import ‘./store’; Import {contador} de ‘./Components/counter’; … luego traspine el código (usando la compilación de la ejecución de NPM) y acceda al navegador. Abra las herramientas de los desarrolladores y use la consola JavaScript para ingresar algunos comandos: despacho = wp.data.dispatch (‘react-exame/consejo’); Select = wp.data.select (‘react-exame/counsers’); statt.AddCounter (‘A’); Dispatch.AddCounter (‘B’); statt.AddCounter (‘C’); Dispatch.setCounterValue (‘A’, 3); Select.getCounterIds (); // array (3) [“a”, “b”, “c”] select.getCounterValue (‘a’); // 3 Usando las funciones de envío y selección de WordPress, podrá ver que la tienda está funcionando como se esperaba. Y un consejo adicional: hay una extensión para Firefox y Chrome llamado Rodux Devtools, que le permite ver correctamente las tiendas Rodux: la extensión de Rodux DevTools y Chrome le permite verificar fácilmente el estado de las tiendas Rodux.