Get best of the week

Angular: una introducción clara a NGRX

imagenEl propósito de este artículo es dar una visión limpia y clara de ngrx . Para hacer esto, explicaré lo que necesita saber y comprender sobre ngrx, y luego lo veremos en acción con ejemplos de código simples y claros.

Aquí hay una lista de temas que discutiremos en este artículo:

  • ¿Qué es ngrx?
  • Beneficios de usar ngrx
  • Desventajas de usar ngrx
  • Cuando usar ngrx
  • Acciones, cajas de cambios, selectores, almacenamiento y efectos

Continuación del artículo con un ejemplo de uso: "Angular: un ejemplo de uso de NGRX" .

¿Qué es NGRX?


NGRX es un grupo de bibliotecas "inspiradas" por el patrón Redux, que, a su vez, está "inspirado" por el patrón Flux. En pocas palabras, esto significa que el patrón Redux es una versión simplificada del patrón Flux, y NGRX es la versión angular / rxjs del patrón Redux.

Lo que quiero decir con la versión "angular / rxjs" de redux ... la parte "angular" es que ngrx es una biblioteca para usar en aplicaciones angulares. Parte de los "rxjs" es que la implementación de ngrx funciona alrededor del flujo de rxjs . Esto significa que funciona utilizando varios operadores observables y observables proporcionados por rxjs.

El objetivo principal de este esquema es asegurar el estado predecible del contenedor basado en tres principios básicos.


Veamos los tres principios del modelo Redux y señalemos los beneficios más importantes que proporcionan.

La unica fuente de verdad


En el caso de la arquitectura redux / ngrx, esto significa que el estado de toda su aplicación se almacena en el árbol de objetos dentro del mismo repositorio.
En una tienda? Hablaremos de los repositorios más tarde, pero para una comprensión general, son responsables de mantener el estado y aplicarle cambios cuando se les informe (cuando se envíe la acción, también hablaremos de ellos más adelante).

Los beneficios de tener una fuente de verdad son numerosos, pero para mí lo más interesante (porque esto es lo que afectará a cualquier aplicación angular) es el siguiente:

  • Cuando crea una aplicación angular, generalmente divide el estado y maneja varios servicios. A medida que su aplicación crece, el seguimiento de los cambios en su estado se vuelve cada vez más difícil y, como resultado, se vuelve desordenado, es difícil de depurar y mantener. Tener una sola fuente de verdad resuelve este problema, porque el estado se procesa solo en un objeto y en uno ubicación, por lo que depurar o agregar cambios se vuelve mucho más fácil.

Estado de solo lectura


Nunca cambiará el estado directamente, sino que enviará acciones que describan acciones con el objeto (estas pueden ser cosas como obtener, agregar, eliminar o actualizar el estado).
¿Enviar una acción? ... Hablaremos de las acciones más adelante, pero para una comprensión general, estos son los identificadores de la operación en su aplicación, y se pueden iniciar (o enviar) para indicarle a la aplicación que realice la operación que representa la acción.
Al evitar actualizar el estado desde diferentes lugares y tener un lugar centralizado para realizar cambios que respondan a acciones específicas, obtendrá muchos beneficios. Sin mencionar lo más importante:

  • Usted sabe que cualquier cambio de estado ocurrirá en un solo lugar. Esto tiene un gran impacto en la depuración y las pruebas.
  • Usted sabe que si se envía una determinada acción, la operación en el estado es siempre la misma. Nuevamente, esto afecta directamente la depuración y las pruebas.

Los cambios se realizan con características simples.


Una operación iniciada por el envío de una acción será una función simple llamada reductores dentro del marco de la arquitectura redux.

Estos reductores (recuerde que son funciones simples) reciben una acción y un estado, dependiendo de la acción enviada (generalmente con la instrucción switch), realizan la operación y devuelven un nuevo objeto de estado.

¡El estado en la aplicación redux no ha cambiado! Por lo tanto, cuando un reductor cambia algo en un estado, devuelve un nuevo objeto de estado.

Los beneficios del uso de funciones puras son bien conocidos, como el hecho de que se pueden probar de inmediato si pasa los mismos argumentos que obtiene como resultado.

Este enfoque también nos permite movernos entre diferentes instancias de nuestro estado utilizando las herramientas de desarrollo Redux / ngrx y ver qué ha cambiado entre las instancias y quién lo ha cambiado, entre otras cosas. Por lo tanto, el uso de funciones puras y la devolución de nuevas instancias de estado también tienen un gran impacto en la depuración.

Pero la principal ventaja, en mi opinión, es que al vincular todos los datos de entrada de nuestros componentes a las propiedades de estado, podemos cambiar la estrategia de detección de cambios para impulsar, y esto aumentará el rendimiento de la aplicación.

Genial ... Entonces, ¿cuáles son los beneficios de usar NGRX?


Ya mencionamos la mayoría de ellos cuando hablamos sobre los principios de la plantilla redux. Pero observemos las ventajas más importantes de usar la plantilla redux en la aplicación (en mi opinión):

  • , , .
  • redux , .
  • , , , , ngrx rxjs, .
  • ngrx, .

…


  • NGRX, , . , , , . , .
  • . , - , , , , , , . () rxjs .
  • NGRX Google, , , Angular ngrx. - , , .

NGRX


Por lo tanto, generalmente se acuerda que ngrx debe usarse en proyectos medianos / grandes cuando la administración estatal se vuelve difícil de mantener. Algunas personas más fanáticas dirán algo como "si tienes una fortuna, entonces tienes NGRX".

Estoy de acuerdo en que debe usarse en proyectos medianos o grandes cuando tiene un estado significativo y muchos componentes que usan este estado, pero debe considerar que Angular proporciona muchas soluciones de administración de estado, y si tiene un fuerte Equipo de desarrollo angular, entonces tal vez no necesite preocuparse por ngrx.

Al mismo tiempo, creo que un fuerte equipo de desarrollo de Angular también puede decidir incluir ngrx en la solución, porque conocen todo el poder de la plantilla redux, así como la fuerza agregada por los operadores de rxjs, y se sienten cómodos trabajando con ambos ...

Si esperaba una respuesta simple, para decidir cuándo usar ngrx, no lo obtendrá y no confíe en nadie que le brinde esta respuesta fuera de su organización o grupo. La decisión depende de estudiar los pros y los contras, comprender a su equipo y tener en cuenta sus opiniones.

Acciones NGRX, cajas de cambios, selectores, almacenamiento y efectos


Estos son los bloques de construcción básicos de la secuencia ngrx. Cada uno de ellos asume una parte del proceso de iniciar una operación para cambiar nuestro estado y obtener datos.

imagen

En la imagen vemos la secuencia ngrx. Vamos a explicarlo ...

  1. . , , , .
    …

    «» () . — , NGRX Action. Action' ( GetUserName):

    type (): , , . : '[User] Get User Login''.

    payload ( ): , . , . .
  2. , ( switch) , , .
    ...

    — , : . ngrx , , , , , .
  3. , - , . , - HTTP .
    ...

    ngrx , ngrx.

    Effects , - , , , , , .

    , API.

    , , (success, error ..), , ngrx.
    , ( ), «-» ( , ).
  4. . , ngrx , , .
    ...

    , , , .

    NGRX «» . , , .

    . . «store» , .

    ...

    Una tienda es un objeto (una instancia de la clase Store ngrx) que combina las cosas que mencionamos anteriormente (acciones, reductores, selectores). Por ejemplo, cuando se envía una acción (utilizando la función de envío del objeto de almacenamiento), el almacenamiento es el que encuentra y ejecuta el reductor correspondiente.

    También es titular de una solicitud estatal.


Continúa el artículo con ejemplos de uso: "Angular: un ejemplo de uso de NGRX" .

More articles:


All Articles