Mejorando la experiencia de desarrollo
Al hablar con colegas de diferentes compañías, noté que a muchos equipos les encanta NgRx. Durante nuestras discusiones, la idea no me dejó:
"Sería bueno mantener menos código y seguir más las guías de escritura para facilitar el escalado posterior" .
Esto me llevó a comenzar a explorar varias técnicas de refactorización de Redux. Vi un video, leí artículos y documentos de Redux. Al final, escribí un complemento para NgRx llamado NgRx Ducks
Objetivos
Básicamente, ngrx-ducks fue creado para simplificar el trabajo con NgRx.
- Manejo de acciones simplificado utilizando la API Decorator , que reduce la cantidad de código que debe escribirse para configurar tanto el Reductor como el creador de la acción. NgRx Ducks genera automáticamente creadores de acción y funciones reductoras .
- Menos soporte técnico, ya que no necesita escribir enumeraciones o tipos de unión .
- Se proporciona una lógica de aplicación más clara gracias a una API tipada intuitiva que puede usar como un Servicio inyectable , que configura la interacción con la Tienda por usted.
Como funciona
Esta biblioteca funciona como una capa adicional en NgRx. Crea automáticamente creadores de acción y funciones reductoras para usted. Además, obtiene un servicio que puede usar en sus componentes. Este servicio proporciona una API estrictamente tipada que permite enviar acciones y seleccionar datos del almacenamiento.
La biblioteca NgRx Ducks no modifica el comportamiento NgRx existente. Solo controla los repositorios observables y el método de envío .
Dado que NgRx Ducks se basa únicamente en el envío y el hecho de que el repositorio proporciona un observable, NgRx Ducks sigue siendo compatible con NgRx, incluso si hay cambios críticos en la versión.
Instalación
NgRx Ducks se integra a la perfección con un proyecto NgRx existente. Simplemente instale el paquete npm y estará listo para comenzar.
npm install @co-it/ngrx-ducks
API de decorador
La idea principal de NgRx Ducks es combinar tipos de acción y lógica de mutadores ( también llamados reductores ). Por lo tanto, se agregó el decorador @Ducksify para anotar una clase regular.
import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter {}
El decorador le permite especificar el estado inicial de su estado. Pasar initialState permite que NgRx Ducks genere automáticamente una función reductora más adelante.
Ahora puede colocar la lógica de mutación dentro de la clase. Ya no es necesario escribir expresiones de mayúsculas y minúsculas . En su lugar, creamos un mapeo entre el tipo de acción y la lógica de mutación usando el decorador de acciones .
import { Action, Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ }) export class Counter { @Action('[Counter] Increase by passed value') increaseBy(state: number, payload: number): number { return state + payload; } }
NgRx Ducks asigna cada acción con la lógica de mutación correspondiente. Duck contiene toda la información necesaria para generar la función reductora.
Función reductora
Las funciones reductoras se generan automáticamente usando NgRx Ducks. La fábrica reducerFrom crea una tabla de búsqueda para asignar cada tipo de acción a su lógica de mutación correspondiente.
import { reducerFrom, DucksifiedAction, ... } from '@co-it/ngrx-ducks'; export function reducer( state: number, action: DucksifiedAction): number { return reducerFrom(Counter)(state, action); }
Aún necesita envolver reducerFrom dentro de la función exportada para funcionar correctamente con el compilador AoT .
El reductor generado debe agregarse a ActionReducerMap usando NgRx ( ver ejemplo a continuación ).
¡Pato poder!
¡Lo más interesante está por venir! El objetivo de NgRx Ducks es simplificar la interacción con el Almacén. Con la generación automática de la función reductora, todo está bien, así que echemos un vistazo a la fachada dinámica , que también se crea aquí.
El decorador @Ducksify también se encarga de registrar su pato como un Servicio en el contenedor Angular IoC. ¡Esto significa que puedes incrustar pato en tu componente!
Envío de acciones de bóveda
NgRx Ducks agrega algunas correcciones a Duck que le permiten usar llamadas de función simples en lugar de enviar acciones manualmente. Obtiene una API escrita dentro de sus componentes.
import { Duck } from '@co-it/ngrx-ducks'; @Component({ }) export class CounterComponent { constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.counter.incrementBy(42); } }
Implementa Duck, no Counter en sí. Duck crea automáticamente un creador de acción para incrementBy que distribuye la acción con el valor pasado (carga útil). Gracias a los tipos dinámicos de TypeScript, inmediatamente se completa automáticamente en el IDE.
En resumen, NgRx Ducks automatiza todo el proceso de procesamiento de acciones. Configura la acción una vez en Duck, y luego simplemente usa la fachada dinámica, tipeada, generada y actualizada automáticamente para usted.
Recuperación de datos del almacenamiento
Duck usa selectores NgRx para leer datos del almacenamiento. Cada pato tiene una selección auxiliar que acepta un selector.
Imaginemos que nuestro contador está registrado como una función NgRx con la tecla " contador ". Esto nos permitiría la siguiente configuración del selector.
import { createFeatureSelector, createSelector} from '@ngrx/store'; const visitCounter = createFeatureSelector<number>('counter'); const count = createFeatureSelector<number>(count => count); @Component({ }) export class CounterComponent { count$: Observable<number>;constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.count$ = this.counter.pick(count); this.counter.incrementBy(42); } }
Puede ver la demostración en stackblitz.io .
Duck permite activar mutaciones de estado y consultar datos del Repositorio. Solo necesita un Servicio "utilizado", que configura una API conveniente para interactuar con el Almacenamiento.
Y finalmente
¡NgRx Ducks también se integra perfectamente con Efectos! PERO analizaremos esto en detalle solo en el próximo artículo.
Si está ansioso por averiguarlo ahora mismo, puede consultar el ejemplo complejo, que también está disponible en stackblitz.io.
TL; DR
- NgRx Ducks funciona como una capa adicional sobre NgRx.
- Puede integrar fácilmente NgRx Ducks en proyectos existentes.
- Pato
... genera automáticamente creadores de acciones y funciones reductoras
... hace innecesarios los enumeradores de acciones y los tipos de unión
... Es una fachada dinámica que puede integrarse en un componente
... proporciona auto-despacho de tipo dinámico; lo siento, acciones
... permite leer datos del Almacenamiento usando pick-API
... puede ser usado por Efectos (ver. Demo )
Eso es todo chicos!
Espero haber logrado convencerte de que pruebes los Patos NgRx . Además, me pregunto qué piensa de esta biblioteca. Si tienes alguna idea, solo escribe en GitHub