A medida que nos preparamos para nuestro nuevo proyecto Angular, evaluamos varios conceptos arquitectónicos para emplear dentro de nuestro sistema, especialmente la administración estatal. En el pasado, había complejidades naturales con los componentes del cliente que se notificaban de manera proactiva. Hoy, ingresa a programación reactiva y tiendas centrales.
Entiendo la naturaleza de mantener una tienda central 'grande' con las acciones correspondientes (dentro de varios servicios), reductores y suscriptores que contienen el estado de toda la aplicación. También veo el beneficio de estratificar las pruebas unitarias con estos reductores de funciones puras. La pregunta que tengo es cómo se compara esto con las nociones clásicas de 'separación de preocupaciones' y 'responsabilidad única' donde el estado se mantiene para esos componentes a través de sus servicios dedicados (dependencia inyectada) mientras que también se proporciona una apariencia de desacoplamiento.
¿Por qué usar grandes almacenes centrales en lugar de servicios únicos que mantienen un estado 'contenido' que emite cambios a los suscriptores Y mantienen esa separación de preocupaciones (por ejemplo, los datos del cliente están separados de los datos del inventario)? Aunque hay alusiones a esto en otras partes de SO y la web, no veo referencias que aborden directamente esta pregunta. Los pensamientos que comparan estas 2 nociones (estado de almacenamiento central frente a servicio inyectado de dependencia/estado de singleton) y/o referencias que lo hacen son muy apreciados.
Definitivamente es un buen comienzo en su viaje de Angular hacerse ese tipo de preguntas sobre la arquitectura del proyecto.
Con AngularJs (v1.x) realmente no sabía cuál era el mejor patrón para trabajar de forma reactiva y asegurarme de que todos los componentes pudieran suscribirse a datos en algún lugar de un servicio y si otro componente llamaba al servicio para actualizar algunos datos, otros componentes se actualizarían. En ese entonces, probé varias soluciones y terminé agregando RxJs a mi proyecto. Probablemente fue una exageración ya que no estaba al tanto del superpoder de RxJs y básicamente no usé ningún operador, solo me estaba suscribiendo.
Hace 6 u 8 meses, descubrí Redux y encontré este enfoque muy interesante. Decidí profundizar más en esa idea de tienda centralizada, con funciones puras y datos inmutables. Fue una de las mejores opciones como desarrollador web que he hecho . Puede usar Redux fuera de cualquier marco. Entonces, incluso si tengo que hacer un ejemplo con JQuery y mantener una gran cantidad de datos, uso Redux .
Una cosa que realmente me gusta de Redux es normalizar mis datos y manipularlos como una base de datos donde un reductor manipula una tabla, por ejemplo. La " vista computarizada " con selectors también es una forma poderosa de componer sus datos como desee a partir de "tablas" sin procesar.
La pregunta que tengo es cómo se compara esto con las nociones clásicas de 'separación de preocupaciones' y 'responsabilidad única' donde el estado se mantiene para esos componentes a través de sus servicios dedicados (dependencia inyectada) mientras que también se proporciona una apariencia de desacoplamiento.
Bueno, como etiquetó ngrx , puedo imaginar que planea usarlo con Angular (v2 o +) y la separación de preocupaciones es excelente. Divide su lógica por Reducer para manipular las tablas, pero ¿qué tal hacer llamadas ajax, por ejemplo? Para ese tipo de efectos secundarios, debe usar ngrx/effects . Así que seguirás teniendo tus servicios + reductores. Effects te permitirán reaccionar a un envío para una acción determinada.
Por ejemplo, si envía una action con el tipo FETCH_USER , en su reductor simplemente cambia un booleano isFetchingUser a verdadero (para que pueda mostrar una rueda en su vista tal vez). Luego, desde un user.effect.ts (que es un servicio), puede capturar la acción FETCH_USER y llamar a su backend. Una vez que haya llegado la respuesta, envíe desde el efecto una acción FETCH_USER_SUCCESS y pase los datos de la llamada ajax a la payload de la acción.
Si desea echar un vistazo a algún código, he creado una demostración en Github llamada Pizza-Sync . Utiliza @ngrx/store y @ngrx/effects con datos normalizados.
Si tiene la extensión de devtools de Chrome o Firefox Redux, puede echar un vistazo a la tienda y las acciones.
Espero que te ayude, avísame si tienes más preguntas.