Cuáles son los beneficios de usar store (ngrx) en angular 2


Estoy trabajando en un angular 1.x. x proyecto y pensando en actualizar mi código a angular 2.

Ahora en mi proyecto tengo muchos servicios(de fábrica) para el manejo de datos que casi mantienen los datos en js arrays(tanto caché como almacenamiento) y procesan estos datos mediante el uso de subrayado para el manejo de arrays.

Encontré muchos ejemplos en angular2 usando ngrx.

¿Cuáles son los beneficios de usar store compare para usar servicios de datos para manejar ¿data?

Necesito varias tiendas para mi aplicación si tengo varios tipos de datos (stock, pedido, cliente...)?

¿Cómo puedo estructurar (diseñar) mi aplicación para tratar con varios tipos de datos como estos?

Author: Rahul Singh, 2016-05-31

3 answers

Aunque su pregunta se basa principalmente en la opinión, puedo darle algunas ideas de por qué ngrx es una buena opción. A pesar de que la gente dice que no es una buena idea tener todo el estado de su aplicación en un solo objeto (Árbol de estado único). Sin embargo, en mi opinión, su estado será independencia. Con una tienda, todo está en un solo lugar y las mutaciones son explícitas y se rastrean vs se ensucian en todo y se mantienen localmente por componentes. Además, usted selecciona propiedades específicas de su almacene dentro de su aplicación, para que solo pueda seleccionar los datos que le interesan. Si luego adopta la inmutabilidad en sus reductores devolviendo siempre una matriz por ejemplo y usa Observables, puede hacer uso de ChangeDetectionStrategy OnPush. OnPush te da un buen aumento de rendimiento. Echemos un vistazo a la siguiente figura tomada de los documentos oficiales de Angular :

introduzca la descripción de la imagen aquí

Como puede ver, una aplicación Angular se construye utilizando una arquitectura de componentes, lo que resulta en un árbol de componentes. OnPush en un componente significa que solo si los atributos de entrada cambian, la detección de cambio se activará. Por ejemplo, si Child B es OnPush y Child A es Default y cambias algo dentro Child A, Child B's change detector no se activará ya que no se han cambiado los atributos de entrada. Sin embargo, si cambias algo dentro Child B, Child A se volverá a renderizar ya que tiene el detector de cambios predeterminado.

Tanto sobre el rendimiento y el árbol de estado único. Otro la ventaja de la tienda es que en realidad puede razonar sobre sus cambios de código y estado. Así que la realidad de la mayoría Angular 1.x apps es scope soup. Aquí hay un buen gráfico de una entrada de blog de Lukas Ruebbelke:

introduzca la descripción de la imagen aquí

La imagen lo demuestra bastante bien. Otro artículo de Tero Parviainen habla sobre cómo mejoró sus aplicaciones Angulares al prohibir ng-controller. Que todo se relaciona con la sopa de alcance y la gestión del estado en constante cambio es difícil. El redux motivación dice lo siguiente ver aquí:

Si un modelo puede actualizar otro modelo, entonces una vista puede actualizar un modelo, que actualiza otro modelo, y esto, a su vez, podría causar otro ver para actualizar. En algún momento, ya no entiendes lo que sucede en su aplicación, ya que ha perdido el control sobre el cuándo, por qué y cómo de su estado. Cuando un sistema es opaco y no determinista, es difícil reproducir errores o añadir nuevos función.

Mediante el uso de ngrx/store en realidad puede evitar este problema porque obtendrá un flujo de datos claro en su aplicación.

Dado que ngrx está altamente inspirado por redux, yo diría que los mismos principios principales se aplican:

  • Fuente única de la verdad
  • El estado es de solo lectura
  • Los cambios se realizan con funciones puras

Entonces, en mi opinión, el mayor beneficio es que puede rastrear fácilmente la interacción del usuario y razona sobre los cambios de estado porque despachas acciones y esas conducen siempre a un punto mientras que con los modelos simples tienes que encontrar todas las referencias y ver qué cambia qué y cuándo.

El uso de ngrx/store también le permite usar devtools para ver depurar su contenedor de estado y revertir los cambios. Viajar en el tiempo, supongo, fue una de las principales razones para redux y eso es bastante difícil si estás usando modelos antiguos.

La probabilidad como @ muetzerich ya se mencionó es también un beneficio de usar ngrx / store. Los reductores son funciones puras y esas funciones son fáciles de probar, porque toman una entrada y simplemente devuelven una salida y no dependen de propiedades fuera de la función y no tienen efectos secundarios, por ejemplo, llamadas http, etc.

Para saltar a la línea de fondo, yo diría que no es necesario usar ngrx / store para hacer cualquiera de estas cosas, pero estará atado a restricciones (los tres principios mencionados anteriormente) que proporcionan un patrón común y traen niza beneficio.

A sus preguntas:

Necesito varias tiendas para mi aplicación si tengo varios tipos de datos (stock, pedido, cliente...)?

No, no sugeriría usar varias tiendas.

¿Cómo puedo estructurar (diseñar) mi aplicación para tratar con varios tipos de datos como estos?

Tal vez esta entrada de blog de Tero Parviainen te ayude a descubrir cómo diseñar tu tienda. Explica cómo diseñar el árbol de estado de la aplicación para una aplicación de ejemplo.

 62
Author: LordTribual,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-31 10:58:08

Una buena explicación sobre los beneficios de usar una tienda se puede encontrar en documentación

Estado centralizado e Inmutable

Todo el estado de aplicación relevante existe en una ubicación. Esto hace que sea más fácil rastrear los problemas, ya que una instantánea del estado en el momento de un error puede proporcionar información importante y facilitar la recreación de los problemas. Esto también hace que los problemas notoriamente difíciles como deshacer/rehacer sean triviales en el contexto de una aplicación de tienda y permite herramientas potentes.

Rendimiento

Dado que el estado está centralizado en la parte superior de su aplicación, las actualizaciones de datos pueden fluir hacia abajo a través de sus componentes dependiendo de sectores de almacén. Angular 2 está construido para optimizar en tal disposición de flujo de datos, y puede desactivar la detección de cambios en los casos en que los componentes se basan en Observables que no han emitido nuevos valores. En una solución de tienda óptima, esta será la gran mayoría de sus componente.

Probabilidad

Todas las actualizaciones de estado se manejan en reductores, que son funciones puras. Las funciones puras son extremadamente fáciles de probar, ya que simplemente se ingresa, se afirma contra la salida. Esto permite probar los aspectos más cruciales de su aplicación sin burlas, espías u otros trucos que pueden hacer que las pruebas sean complejas y propensas a errores.

Múltiples tiendas?

IMO use un almacén y agregue sus tipos de datos como propiedades en su almacenar.

 7
Author: muetzerich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-31 09:07:46

Ngrx.la tienda hace lo que un componente/servicio bien diseñado hará, con beneficios adicionales. Hasta ahora, y estoy al principio de trabajar en cómo esto se une, esto es lo que he encontrado:

Es muy fácil obtener un desorden inalcanzable con servicios y componentes. Si tiene acciones en cascada, interacciones de datos complejas y llamadas a ubicaciones remotas, termina estructurando un servicio que es casi idéntico al arreglo action-reducer-store en ngrx. Pequeñas funciones puras, observables, etc. ngrx ya lo tiene, por qué no usarlo y beneficiarse del pensamiento y los patrones que representa.

If fuerza/alienta el pensamiento en pequeñas funciones comprobables. Diseñar un reductor o múltiples reductores para un componente moderadamente complejo impone una disciplina que eliminará muchas de las trampas que consumen horas. Nada se traga horas como rastrear una condición de carrera cuasi multiproceso derivada de la cola de devolución de llamada. Estoy seguro de que esto puede suceder con los reductores, pero simplifica el acceso a la secuencia de llamadas y al estado para la depuración.

El patrón Angular2 se vuelve más fácil. Plantillas con la lógica de visualización, componentes como un lugar de reunión de todos los bits y piezas que la plantilla necesita. Los servicios se vuelven más simples, ya que simplemente hacen llamadas remotas o manejan el io de datos desde donde sea que provenga. Luego las acciones y reductores para mantener y cambiar el estado, lo que desencadena todas las otras partes para responder al nuevo estado. Lo encontré con patrón de componente / servicio cualquiera de los dos comenzaría a ser grande y complicado, con el efecto secundario de que se vuelve extremadamente difícil de depurar. Mis servicios terminaban almacenando el estado y haciendo el io de datos.

Observables. Todo es un observable en rxjs.tienda, y que es la base para una aplicación sensible. Estructurar el estado de la aplicación como un observable a veces es un poco arcano o no es muy sencillo, pero averiguarlo y hacerlo bien paga grandes dividendos más abajo alinear.

El único negativo que puedo ver es que los reductores se vuelven extraordinariamente grandes muy rápidamente. Parece haber muchas situaciones en las que el mismo código con diferentes nombres se repite, y se repite. Mi cerebro grita 'función con parámetros', pero no funciona de esa manera. Por otro lado, aquí es donde la estructura y el estado de la aplicación se expresa en todos sus detalles, por lo que seguramente habrá muchos allí. Y cuando algo va mal, como inevitablemente lo hará, tener un la función pura como la fuente del problema hace que sea más fácil rastrear y solucionar.

 5
Author: Derek Kite,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-23 18:48:23