Hola habrozhiteli! El libro React in Action presenta a los desarrolladores front-end el marco React y las herramientas relacionadas. Primero, se familiarizará con la biblioteca React, luego actualizará el material sobre algunas ideas fundamentales en este contexto y aprenderá a trabajar con componentes. En la práctica, dominará React puro (sin transpilación, sin ayudantes de sintaxis), pasará de los componentes estáticos más simples a los dinámicos e interactivos.
La segunda mitad del libro discute varias formas de interactuar con React. Aprenderá los métodos básicos del ciclo de vida, aprenderá cómo crear un flujo de datos, formularios y también probar aplicaciones. Para empezar, encontrará material sobre la arquitectura de la aplicación React, la interacción con Redux, una excursión al renderizado del servidor y una revisión de React Native.
Extracto Capítulo 11. Integrando Redux y React
- Los reductores son una forma para que Redux determine cómo debería cambiar el estado.
- Usando Redux con React.
- Conversión de Letters Social para usar la arquitectura de la aplicación Redux.
- Agregar me gusta y comentarios a la aplicación.
Aquí continúa el trabajo que hizo en el capítulo anterior para crear los elementos básicos de la arquitectura Redux. Trabajará en la integración de React con acciones y repositorios de Redux y aprenderá cómo funcionan los reductores. Redux es una variante de la plantilla Flux diseñada con React en mente; funciona bien con el flujo de datos unidireccional y la API React. Aunque esta no es una opción universal, muchas grandes aplicaciones de React ven a Redux como una de las mejores opciones para implementar una solución de administración de estado. Siga su ejemplo y aplíquelo a Letters Social.
Obteniendo el código fuente
Como antes, puede obtener el código fuente de los ejemplos de este capítulo yendo al repositorio de GitHub en github.com/react-in-action/letters-social . Si planea comenzar a trabajar aquí solo desde cero, tome el código fuente de los ejemplos de los capítulos 7 y 8 (si los estudió y completó los ejemplos usted mismo) o consulte la rama relacionada con este capítulo (capítulo 10-11).
Recuerde que cada rama contiene el código final del capítulo (por ejemplo, el capítulo 10-11 contiene el código obtenido al final de los capítulos 10 y 11). Puede ejecutar uno de los siguientes comandos de su elección en el shell de la línea de comandos para obtener el código de muestra del capítulo actual. Si no hay ningún repositorio, ejecute el comando:
git clone git@github.com:react-in-action/letters-social.git
Si ya ha clonado el repositorio, entonces lo siguiente:
git checkout chapter-10-11
Quizás te mudaste aquí de otro capítulo, por lo que vale la pena verificar si tienes todas las dependencias necesarias instaladas usando el comando:
npm install
11.1 Las cajas de cambios determinan cómo debería cambiar el estado
Puede crear y enviar acciones y manejar errores, pero no afectan el estado de ninguna manera. Para manejar las acciones entrantes, las cajas de cambios deben estar configuradas. Recuerde que las acciones son simplemente formas de informar que se ha producido un evento, y proporcionar algo de información sobre lo que sucedió, nada más. La tarea de los reductores es indicar cómo cambiará el estado de la tienda en respuesta a estas acciones. En la fig. 11.1 muestra cómo las cajas de cambios encajan en la imagen más general de Redux que ya hemos visto.
¿Pero qué son las cajas de cambios? Si aún disfrutaba de la simplicidad de Redux, no se sentirá decepcionado: estas son solo funciones simples que tienen un propósito. Las cajas de cambios son funciones puras que toman el estado y la acción anteriores como argumentos y devuelven el siguiente estado. De acuerdo con la documentación de Redux, se denominan reductores porque su firma de método parece datos pasados a Array.prototype.reduce (por ejemplo, [1,2,3] .reduce ((a, b) => a + b, 0).
Las cajas de engranajes deben ser funciones puras, lo que significa que, dada la entrada, cada vez producirán la misma salida correspondiente. Esto contrasta con acciones o middleware donde se generan efectos secundarios y a menudo ocurren llamadas a la API. Hacer algo asíncrono o impuro (por ejemplo, llamar a Date.now o Math.random ()) en reductores es un antipatrón que puede degradar el rendimiento o la confiabilidad de la aplicación. Los documentos de Redux contienen esta cláusula: “Habiendo recibido los mismos argumentos, debe calcular el siguiente estado y devolverlo. Sin sorpresas Sin efectos secundarios. No hay llamadas de API. No hay cambio Solo un cálculo. Vea
redux.js.org/basics/reducers para más información sobre esto.
11.1.1. Forma de estado y estado inicial
Los reductores comenzarán a trabajar para cambiar la única tienda Redux, por lo que es hora de hablar sobre la forma que tomará la tienda. El diseño de la forma de estado de cualquier aplicación afectará la forma en que funciona la interfaz de usuario de la aplicación (y al mismo tiempo está influenciada por este trabajo), pero como regla general, se recomienda almacenar los datos sin procesar lo más separados posible de los datos de la interfaz de usuario. Una forma de hacerlo es almacenar valores como identificadores por separado de sus datos y usar identificadores para buscar datos.
Creará un archivo de estado inicial que ayuda a determinar la forma y la estructura del estado. En la carpeta de constantes, cree un archivo llamado initialState.js.
Este es el estado de la aplicación Redux antes de enviar cualquier acción o realizar cambios. Ingresará información sobre errores y estados de descarga, así como información sobre mensajes, comentarios y el usuario. Almacenará identificadores para comentarios y mensajes en matrices e información básica para ellos en objetos que son fáciles de consultar. El listado 11.1 muestra un ejemplo de configuración de estado inicial.
11.1.2. Configurar cajas de cambios para responder a las acciones entrantes
Al configurar el estado inicial, debe crear varios reductores para manejar las acciones entrantes para que el repositorio pueda actualizarse. Las cajas de cambios generalmente usan la instrucción switch para actualizar el estado de acuerdo con el tipo de acción entrante. Devuelven una nueva copia del estado (no la misma versión con los cambios), que luego se utilizará para actualizar el repositorio. Las cajas de cambios también siguen el principio general para garantizar que las acciones desconocidas simplemente vuelvan a su estado actual. Ya lo he notado, pero es importante decir una vez más que las cajas de engranajes realizan cálculos y deben devolver el mismo resultado cada vez en función de una entrada dada: no debe haber efectos secundarios o procesos oscuros.
Las cajas de cambios son responsables de calcular cómo debería cambiar el almacenamiento. En la mayoría de las aplicaciones, tendrá muchos reductores, cada uno de los cuales es responsable de parte del almacenamiento. Esto ayuda a mantener los archivos concisos y enfocados. Al final, utilizará el método combineReducers disponible en Redux para combinar reductores en uno. La mayoría de los reductores usan una declaración de cambio con casos para diferentes tipos de acciones y un comando general para todo lo demás para garantizar que los tipos desconocidos de acciones (probablemente creados por casualidad, si los hay) no afectarán el estado.
Los reductores también hacen copias del estado y no modifican directamente el estado existente del repositorio. Si nos fijamos en la fig. 11.1, verá que las cajas de engranajes usan el estado cuando hacen su trabajo. Este enfoque es similar al funcionamiento de las estructuras de datos inmutables: en lugar de cambios directos, se crean copias modificadas. El listado 11.2 muestra cómo configurar el reductor de carga. Tenga en cuenta que en este caso se trata de una porción plana del estado: la carga de la propiedad booleana, por lo que solo debe devolver verdadero o falso para el nuevo estado. A menudo trabajará con un objeto de estado que tiene muchas claves o propiedades adjuntas, en cuyo caso el reductor tendrá que hacer algo más que devolver verdadero o falso.
Ahora que se envía la acción de descarga, el repositorio de Redux podrá hacer algo con ella. Cuando llega una acción y pasa a través de cualquier middleware existente, Redux usa reductores para determinar qué nuevo estado debe crearse a partir de la acción. El repositorio no tenía forma de encontrar la información de cambio contenida en la acción antes de configurar ningún reductor. Para mostrar esto, en la fig. 11.2 cajas de engranajes retiradas del flujo; Vea por qué las acciones no llegan al repositorio.
Luego creará otro reductor para aplicar sus habilidades de Redux. Al final, muchos reductores no devolverán simplemente verdadero o falso. O al menos en los cálculos habrá algo más que verdadero o falso. Otra parte clave de la aplicación Letters Social es mostrar y crear mensajes, y debe portarlo a Redux. Debe guardar la mayor parte de la lógica existente utilizada por la aplicación y traducirla a un formato compatible con Redux, como si hubiera adaptado una aplicación React real para usar Redux. Cree dos reductores para procesar los mensajes y uno para rastrear los identificadores de mensajes. En una aplicación más grande, puede combinarlos bajo una clave diferente, pero ahora es bueno almacenarlos por separado. Este también es un ejemplo de cómo puede configurar varias cajas de cambios para manejar una sola acción. El listado 11.3 muestra cómo escribir un reductor para comentarios. Aquí creará muchos reductores, y tan pronto como se haga esto, la aplicación recibirá no solo una descripción detallada de los eventos que pueden ocurrir, sino también formas de cambiar el estado.
Ahora, cuando envíe acciones relacionadas con comentarios, el estado de la tienda se actualizará en consecuencia. ¿Has notado cómo puedes responder a acciones que no son estrictamente del mismo tipo? Las cajas de cambios pueden responder a acciones que caen dentro de su competencia, incluso si no son del mismo tipo. Esto es posible porque, a pesar de que el segmento de mensaje de estado controla los mensajes, puede haber otras acciones que pueden afectarlo. Conclusión: la caja de cambios es responsable de resolver la cuestión de cómo debe cambiar un indicador de estado en particular, independientemente de qué acción o tipo de acción venga. Es posible que algunos reductores necesiten conocer los diferentes tipos de acciones que no están relacionadas con el recurso (mensajes) que modelan.
Ahora, una vez creado el reductor de comentarios, puede ejecutar uno que procese los mensajes. Será muy similar a un reductor de comentarios porque usa la misma estrategia de almacenarlos por separado como identificadores y objetos. También debe saber cómo manejar los mensajes con y sin Me gusta (usted creó acciones para esta funcionalidad en el capítulo 10). El listado 11.4 muestra cómo implementar todo esto.
Yo (el autor) incluí dos reductores en estos archivos, porque están estrechamente relacionados entre sí y ambos actúan sobre los mismos datos fundamentales (mensajes y comentarios), pero es probable que desee utilizar un reductor para simplificar el trabajo. en el archivo En la mayoría de los casos, la instalación de la caja de cambios por usted reflejará la estructura del almacenamiento o al menos le corresponderá. Es posible que haya notado que el desarrollo del formulario de estado de almacenamiento (consulte el estado inicial que estableció anteriormente en este capítulo) afecta en gran medida la forma en que se definen los reductores y, en menor medida, las acciones. Una conclusión de esto es que es mejor pasar más tiempo desarrollando una forma de estado que darle un brillo. Si se asigna muy poco tiempo al diseño, puede llevar mucho tiempo refinar el formulario de estado para mejorarlo, mientras que el diseño cuidadoso y las plantillas de Redux hacen que agregar nueva funcionalidad sea una acción simple.
Migración a Redux: ¿es necesario?
Mencioné varias veces en este capítulo que Redux puede requerir mucho trabajo para la configuración inicial (puede que ya haya experimentado esto), pero al final dará sus frutos. Esto es especialmente cierto para proyectos en los que yo y otros desarrolladores familiares trabajamos. Un proyecto en el que participé incluyó la migración completa de una aplicación de la arquitectura Flux a Redux. Todo el equipo trabajó durante aproximadamente un mes, pero pudimos comenzar a reescribir la aplicación, logrando una inestabilidad mínima y reduciendo al mínimo la cantidad de errores.
Y el resultado general fue la posibilidad de una reproducción iterativa más rápida del producto utilizando plantillas que Redux nos ayudó a colocar en el lugar correcto. Unos meses después de la migración de Redux, completamos una serie de rediseños completos de la aplicación. Aunque rediseñamos la mayor parte de la aplicación React, la arquitectura Redux nos permitió hacer muy pocos cambios en la administración del estado y la lógica comercial de la aplicación. Además, las plantillas de Redux han facilitado la adición al estado de la aplicación cuando sea necesario. La integración de Redux ha justificado el trabajo de configuración y traducción de la aplicación y continúa pagando dividendos.
»Se puede encontrar más información sobre el libro en
el sitio web del editor»
Contenidos»
ExtractoCupón de 20% de descuento para vendedores ambulantes -
Reaccionar