Advanced ReactJS: mejores prácticas para React + Redux + Sagas

café para pensar

Primero lo primero, una introducción rápida sobre qué es React. Es una biblioteca de JavaScript utilizada para construir interfaces de usuario. Ha cambiado el panorama de desarrollo front-end desde que salió. Por lo tanto, si aspira a ser un desarrollador web front-end, aprender bibliotecas como React o Vue.js es casi esencial en la industria actual. Aquí hay un gran tutorial si recién está comenzando a aprender React. https://reactjs.org/tutorial/tutorial.html.

Recuerdo cuando comencé a aprender React. Siempre tuve la sensación ansiosa de que nunca podría aprender todo lo que necesitaba, el lenguaje JavaScript en constante cambio se cernía sobre mi cabeza, y si alguna vez hacía algo bien, siempre terminaba preguntándome, ¿era realmente la mejor manera? ¿para hacerlo? Después de literalmente cientos de tutoriales en línea, búsquedas en Youtube y tazas de café sin terminar (y probablemente sin lavar), finalmente entendí lo que React intenta incorporar a la tabla de JavaScript.

Sin embargo, siempre me ha costado encontrar un tutorial que reúna todos los conceptos avanzados de React en un tutorial compacto.

Además, recuerdo haber tenido dificultades para comprender estos conceptos cuando se utilizaron dentro de un gran código fuente. Esa es la brecha que este artículo está tratando de llenar. Las herramientas y conceptos avanzados están integrados en nuestra aplicación simple, esto es solo para fines de tutoría y no debe usar estos conceptos si su aplicación no los necesita.

Suficiente con el chit-chat. Hablemos del código. Descargue el código terminado de este repositorio y siga el archivo README para que pueda ver y sentir lo que vamos a construir aquí. https://github.com/jelorivera08/react-starter-pack.

Página de inicio de la aplicación

Arriba, puede ver el estado de conteo que se muestra y cuatro botones que activan sus acciones respectivas. Sus acciones se explican por sí mismas.

selectores

Dirígete al archivo selectors.js dentro del contenedor Counter, el primer concepto avanzado que estamos abordando aquí es createSelector. Al mirar el código, primero, la variable de recuento constante obtiene el estado de recuento dentro del árbol de estado redux usando state.get ("recuento").

Luego, creamos un selector utilizando dicho método. Esto nos ayuda a formatear el estado / datos que recibimos del árbol de estado redux y al hacerlo, ahorramos mucho tiempo codificando nuevas funciones que manejan la reestructuración del estado o formateando el estado objetivo cada vez que lo necesitamos para representar algo en el frente -fin. En este ejemplo, no alteré el estado que recibí. Acabo de devolver el estado normal para fines de demostración.

Luego, la función resultante se usará dentro de mapStateToProps, y con mapStateToProps, naturalmente, lo siguiente que se debe configurar es mapDispatchToProps.

crear acciones

Siempre que despachemos acciones reductoras, siempre tenemos que declarar su tipo y el caso de cambio correspondiente a un reductor que ingresará más adelante para cambiar el estado de la aplicación. Con el paquete createActions de reduxsauce, podemos golpear dos pájaros de un tiro. También debemos formatear el reductor con reduxsauce para aprovechar al máximo este paquete.

reductor

Arriba está el reductor de nuestra aplicación. El estado inicial está encerrado por fromJS API de inmutable y, como se aplica el nombre del paquete, protege el estado inicial de ser mutado. Reaccionar es muy estricto con este concepto, así que siempre tenlo en cuenta. La API createReducer de reduxsauce tiene dos argumentos.

Primero, el estado inicial. Segundo, el objeto que tiene claves para los tipos y valores de acción como una función que el reductor disparará una vez que un tipo coincida con una llamada de despacho. Combinar, entonces, cambia el árbol de estado redux en consecuencia. No hay una aplicación de la vida real que no sepa cómo manejar las llamadas asíncronas de API, ¿verdad? Derecha.

saga redux

Aquí está la parte de la saga de nuestro programa. Todo es igual excepto por la forma en que llamamos a nuestras acciones. Hacemos uso de la acción de tipo que creamos anteriormente y la utilizamos dentro de nuestra saga de observadores para enviar llamadas asincrónicas que luego afectarán a nuestro árbol de estado redux.

El retraso está ahí para burlarse de la latencia de red para una mejor sensación asincrónica de la aplicación. Ah, y por último, asegurémonos de no olvidarnos del rendimiento.

división de código

La división de código es una excelente manera de mejorar el rendimiento de las aplicaciones web. El código JavaScript tiene el mayor costo en los datos de un usuario. Recuerde que, con la división de código, permite al usuario final descargar solo la parte del código que necesita para la eficiencia del consumo de datos.

En conclusión,

Existen muchos paquetes y herramientas que nos ayudan, los ingenieros de software crean un código más limpio y mucho más eficiente. viene con un costo, el costo de comprender el sistema subyacente y eso es pensar en React.

Learning React requiere que cambies tu paradigma de codificación a uno mucho más diferente en comparación con la mentalidad previa de codificación en el front-end. Las herramientas y paquetes que he discutido en este artículo encapsulan esos principios necesarios para codificar bella y eficientemente en React y eso es lo que hace a un desarrollador excepcional.

Siempre son las pequeñas cosas.

Con eso, espero haberte ayudado a comprender mejor React con este pequeño artículo. ¡Salud!